Почему jQuery .insertAfter не работает в этом примере? - PullRequest
Новая
       11

Почему jQuery .insertAfter не работает в этом примере?

2 голосов
/ 02 октября 2009

В следующем примере отображается предупреждение, но сообщение # пусто .

Если я закомментирую строку .insertAfter, то # сообщение будет отображаться правильно.

Почему в этом примере не работает .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>

Ответы [ 3 ]

8 голосов
/ 02 октября 2009

insertAfter работает только с элементами, уже существующими в DOM, ознакомьтесь с документацией:

элементы уже должны быть вставлены в документ (вы не можете вставить элемент за другим, если он не находится в страницы).

Возможно, вы ищете append или appendTo ?

4 голосов
/ 02 октября 2009

В 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';
          }
      }
  });
1 голос
/ 17 сентября 2012 
$(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';
            }
        }

    });
});

1002 *

Над верным кодом. Используйте append застраховано от .insertAfter.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...