javascript - 无法使用 jquery 调用 javascript 附加类

Question

我无法在jquery中调用附加了javascript的类。它根本不响应它。

我在 html 中附加了以下内容:

$(function () {
var $scntDiv = $('#parts');
var i = $('#parts input').size();

$('#addField').on('click', function () {
    var part = '<div id="parts' + i + '"><hr /><input type="text" id="auto_part' + i + '" class="auto_part" name="auto_part' + i + '" placeholder="Dio" /><br/>' +
        '<textarea type="text" id="auto_description' + i + '" class="auto_description" name="auto_description' + i + '" placeholder="Vise informacija"></textarea> <br />' +
        '<a href="#" class="addPhoto' + i + '" style="display:block;">Add Photo</a><input type="file" name="auto_image" class="auto_image' + i + '" style="display:none;" /><a href="#" class="removefield">Izbrisi dio</a></div>';
    $scntDiv.after(part);
    $("#row_count").val(i);
    i++;
    return false;
});

$(document).on("click", ".removefield", function () {
    if (i > 2) {
        $("#row_count").val(i);
        $(this).parent('div').remove();
        i--;
    }
    return false;
});

});

因此它创建了 addPhoto2、addPhoto3 等等。但是当我使用这个时:

$(function () {
    $(".addPhoto2").click(function(){
       console.log("Hello");
    });
});

它只是对 addPhoto2 没有做任何事情。虽然我可以调用默认加载的 addPhoto 本身。

Answer 1

您需要在创建元素时将事件附加到该元素，因为当您尝试连接该事件时，如果该元素不存在于 DOM 中，则简单的事件将不起作用。您可以为此使用事件委托(delegate)。不过，您已经有了一个很好的 Hook 。

您需要做的是在将元素放置在此处后附加此事件:

$scntDiv.after(part);
$('.addPhoto' + i).click(function(){
    alert("!"); 
 });

这是一个工作演示:http://jsfiddle.net/eQbEt/