Question

在以下示例中，警告显示，但 #message为空。

如果我注释 .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>

Answer 1

insertAfter仅适用于DOM上已存在的元素，请查看文档：

必须已插入元素进入文档（你不能插入一个元素接连，如果它不在页面）。

您是否正在寻找append或appendTo？

Answer 2

在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';
          }
      }
  });

Answer 3

$(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。

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

3 个答案: