Событие jQuery не запускается - PullRequest
7 голосов
/ 30 мая 2011

У меня есть 3 файла:

  • js_json.js -> для моего кода JSON
  • javascript.js -> для моего javascript функция
  • index.php

Здесь код для js_json.js:

$(function(){
    $('#postTitle').change(function(){

        var title_id = $("#postTitle").val();


        $.ajax({
            type:"post",
            url:"proses.php",
            data:"title_id=" + title_id,
            dataType:"json",
            success:function(data){
                body="";
                //$.each(data, function(i,n){
                    //body = n['body'];    
                //});
                body += "<a href=\"javascript:void(0);\" id=\"pesan\" name="pesan" onClick=\"\">Hola Test</a>";
                $(".postBody").empty();
                $(".postBody").append(body);
            },
            error:function(data){
                $(".postBody").empty();
                $(".postBody").append("NO Post Selected.");
            }

        });
        return false;
    });
});

и вот мой javascript.js код:

$(function (){
    $("a[name=pesan]").click(function (){
        alert("holalalalalal.....!");    
    });
});

и здесь код index.php:

    //some code
    <body>
        <a href="javascript:void(0);" id="pesan" name="pesan">Hola Test 1</a>
        Posts : <br />
        <select name="title" id="postTitle">
            <option value="">Select Post...</option>
            <?php
                $sql = "SELECT id, title FROM posts ORDER BY title";
                $query = mysql_query($sql) or die(mysql_error());

                while($rows = mysql_fetch_array($query)){
                    print('<option value="' . $rows['id'] . '">' . $rows['title'] . '</option>');
                }
            ?>
        </select>
        <br />
        Body : <br />
        <div class="postBody">
            Will show the body of post.
        </div>
    </body>
</html>

и мой вопрос:

Когда я нажимаю ссылку «Hola Test 1», она работает, и появляется сообщение. Проблема в том, что после того, как я щелкнул по опции выбора, и появилась ссылка «Hola Test», а затем я щелкнул эту ссылку («Hola Test»), сообщение не появляется и в firebug нет ошибок ...

Может кто-нибудь объяснить мне, почему ...? Спасибо это ...

Ответы [ 2 ]

18 голосов
/ 30 мая 2011

click() будет связывать событие только для элементов, которые существуют на странице во время вызова click (то же самое касается on() без селектора, bind() и всех других методов в ярлыке -группа для привязки; keydown(), change() и т. д.).

Поскольку ваш другой элемент добавляется через AJAX через некоторое время , обработчик не привязан к нему.

Вместо этого используйте .on() с селектором, который свяжет событие со всеми текущими и будущими элементами, совпадающими с селектором.

$(function (){
    $(document).on('click', 'a[name=pesan]', function () {
        alert("holalalalalal.....!");    
    });
});

Поскольку on() был представлен в jQuery 1.7, если вы используете более ранние версии jQuery (например, те, которые существовали, когда задавался этот вопрос), вы можете использовать live() или delegate() вместо вкл;

$(function (){
    $('a[name=pesan]').live('click', function () {
        alert("holalalalalal.....!");    
    });
});
1 голос
/ 25 марта 2014

Я хочу упомянуть (потому что я не нашел упоминания об этом ни в одном из случаев "событий, не запускающих", для которых я искал в Интернете) , что есть вероятность, которая может вас укусить.

Если вам случится использовать .remove () , чтобы временно извлечь что-то из DOM, а затем снова вставить его, тогда вы потеряете свои события.Вместо этого вам нужно использовать .detach () , чтобы сохранить данные и события после повторной вставки.Это может быть трудно отладить, так как все может выглядеть нормально, а инструменты отладки событий в лучшем случае схематичны.

(Лично я бы назвал их чем-то вроде .detachAndScrubDataAndEvents () и .detach () , поскольку я поклонник описательных имен, экономящих часы отладки. Для тех, кто находит .remove () и .detach () быть семантически и осмысленно различаемыми именами ... мир с тобой ... НО ты совершенно ошибаешься.)

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