代码之家 › 专栏 › 技术社区 › Edward Tanguay

为什么jQuery.insertAfter在本例中不起作用?

jquery

Edward Tanguay · 技术社区 · 15 年前

在以下示例中,警报显示,但 #消息是空的

如果我点评在第行后面插入.insert,则正确显示#消息。

萤火虫就在它上面。

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

});

<!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>

3 回复 | 直到 15 年前

Christian C. Salvadó 15 年前

insertAfter 仅适用于DOM上已有的元素,请查看文档:

必须已插入元素元素,如果它不在页面)。

append appendTo ?

nbrooks 13 年前

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

nbrooks 13 年前

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