Question

好的所以我发了这篇文章ajax thingy，用以下代码将一部电影添加到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

在将元素添加到页面之前，您将附加单击处理程序。您需要使用事件委派。

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

Answer 2

听起来搜索结果是动态加载的吗？如果是这种情况，您需要委托事件处理程序。

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

JS / JQUERY a.click（）会在页面执行操作之前刷新页面，或根本不检测页面

2 个答案: