javascript - JS/JQ a.click() 会在执行操作之前刷新页面，或者根本检测不到

Question

好吧，我做了这篇文章 ajax 的东西，它使用以下代码将电影添加到 div 中:

<a href="" class="movie" id="1"><img src="images/movies/1.png"></a>

如果我手动将其添加到 html 中，jquery 脚本将起作用并显示“clicked on 1”。

但是如果我使用 $.post 从数据库添加电影它没有检测到点击。我能做什么？

这是 jquery 脚本的代码:

$(function(){
    $('#search').click(function(){
        $.post("search_movie.php", { name : $('#search_crit').val() }, function(data){
            rdata = JSON.parse(data);
            $('#search_result').empty();
            $.each(rdata, function(i){
                $('#search_result').append('<a href="" class="movie" data-id="' + rdata[i]['movie_id'] + '"><img src="images/movies/' + rdata[i]['movie_id'] + '.png"></a>');
            });
        });
    });

    $('.movie').click(function(event){
        event.preventDefault();
        alert('clicked on: ' + $(this).attr('data-id'));
    });
});

这是 html 部分的代码:

<!--START Search Form-->
<div id="search_form" class="grid_12">
    <form method="POST" action="">
        <input type="text" id="search_crit">
        <select id="search_type">
            <option value="name"> By Name </option>
            <option value="date"> By Date </option>
        </select>
        <button type="button" id="search"> Search </button>
    </form>
</div>
<!--END Search Form-->

<!--START Search Result-->
<div id="search_result" class="grid_12">
    <a href="" class="movie" data-id="1"><img src="images/movies/1.png"></a>
</div>
<!--END Search Result-->

正如你所看到的，我在 html 中手动添加了一个电影并且有效...我检查了从 jquery 添加的其他元素，它们具有电影类和正确的 id，所以我不知道确切的原因。你能帮我吗？

Answer 1

您将在将元素添加到页面之前附加点击处理程序。您需要使用事件委托(delegate)。

$("#search_result").on("click", '.movie', function(event){
    event.preventDefault();
    alert('clicked on: ' + $(this).attr('data-id'));
});