为什么jQuery .insertAfter在这个例子中不起作用？

在以下示例中，警报显示，但＃消息为空。为什么jQuery .insertAfter在这个例子中不起作用？

如果我注释掉 .insertAfter行然后#message显示正确。

为什么在此示例中没有.insertAfter工作？

Firebug正好踩在它的上方。

的javascript：

google.load("jquery", "1.3.2"); 

//run when page is loaded 
google.setOnLoadCallback(function() { 

    $('.languageChooser select').bind('click', function() { 
     var numberOfItems = $('.languageChooser select option:selected').length; 
     $('#message').hide().html("You have selected " + numberOfItems + " " + smartPlural('language',numberOfItems) + ".").fadeIn('slow'); 

     if(numberOfItems == 1) { 
      $('#message').insertAfter('<div>Use the CTRL and SHIFT keys to select multiple items.</div>'); 
      alert('here'); 
     } 
    }); 

    function smartPlural(itemName, numberOfItems) { 
     if(numberOfItems == 1) { 
      return itemName; 
     } else { 
      return itemName + 's'; 
     } 
    } 

});

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
     <title>Text XHTML Page</title> 
     <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/> 
     <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     <script type="text/javascript" src="javascript/main.js"></script>  
    </head> 
<body> 
    <div class="languageChooser"> 
     <div class="title">Please choose a language:</div> 
     <select size="4" multiple="multiple"> 
      <option>C#</option> 
      <option>Ruby</option> 
      <option>PHP</option> 
      <option>VB.NET</option> 
      <option>JavaScript</option> 
      <option>Scala</option> 
     </select> 
     <div id="message"></div> 
    </div> 

</body> 
</html>

来源

2009-10-02 Edward Tanguay

insertAfter作品只与元素已经存在于DOM，给看看是否与文档

元素必须是a已将插入文档中（如果不在页面中，则不能再插入元素）。

您是否在寻找append或appendTo？

来源

2009-10-02 05:07:18 CMS

因此，如果我有一个动态创建的元素，并且我想在现有元素（即存在于DOM中）之后插入它。它会被添加或不？ – cafebabe1991 2014-04-19 14:44:57

@ cafebabe1991，是的，如果现有的元素被显示或部分在里面** ..... .... ** – 2017-01-13 10:42:39

在jQuery中，我们使用$(element).after([html])而不是$(element).insertAfter([html])。只需将您的代码更改为此，即可使用。

 
    google.load("jquery", "1.3.2"); 
    google.setOnLoadCallback(function() { 
     $('.languageChooser select').bind('click', function() { 
      var numberOfItems = $('.languageChooser select option:selected').length; 
      $('#message').hide().html("You have selected " + numberOfItems + " " + smartPlural('language',numberOfItems) + ".").fadeIn('slow'); 
      if(numberOfItems == 1) { 
        //$('#message').insertAfter('Use the CTRL and SHIFT keys to select multiple items.'); 

        $('#message').after('Use the CTRL and SHIFT keys to select multiple items.'); 
        alert('here'); 
      } 
     }); 
     function smartPlural(itemName, numberOfItems) { 
      if(numberOfItems == 1) { 
        return itemName; 
      } else { 
        return itemName + 's'; 
      } 
     } 
    });

来源

2009-10-02 14:52:25 GeekTantra

$(window).ready(function() { 

    //google.load("jquery", "1.3.2"); 
    //run when page is loaded 
    google.setOnLoadCallback(function() { 

     $('.languageChooser select').bind('click', function() { 
      var numberOfItems = $('.languageChooser select option:selected').length; 
      $('#message').hide().html("You have selected " + numberOfItems + " " + smartPlural('language', numberOfItems) + ".").fadeIn('slow'); 

      if (numberOfItems == 1) { 
       $('#message').append('Use the CTRL and SHIFT keys to select multiple items.'); 
       // alert('here'); 
      } 
     }); 

     function smartPlural(itemName, numberOfItems) { 
      if (numberOfItems == 1) { 
       return itemName; 
      } else { 
       return itemName + 's'; 
      } 
     } 

    }); 
});

以上是正确的代码。使用append确认.insertAfter。

来源

2012-09-17 06:34:16

为什么jQuery .insertAfter在这个例子中不起作用？

回答

相关问题