jquery - 如何将 jquery 脚本用于新对象？

Question

再会。

在我的页面上找到脚本：

$('.crop_photo').on('click',function(){

$('#form_cropbox').ajaxForm(
{
url:        'update.php', 
success:    function(data) {
}
}).submit();
});

使用其他脚本我在页面上创建了一个新对象（图像和表单）：

.....
$('#edit_photo').html(
'<img src="./Images/Temp/' + data + '" id="cropbox" width="600" />'+
'       <form action="update.php" method="post" id="form_cropbox" onsubmit="return checkCoords();">'+
'           <input type="hidden" id="x" name="x" />'+
'           <input type="hidden" id="y" name="y" />'+
'           <input type="hidden" id="w" name="w" />'+
'           <input type="hidden" id="h" name="h" />'+
'           <input type="hidden" id="f_count_v" name="f_count_v" value="'+ count + '" />'+
'           <input type="button" value="Сохранить область фотографии" class="btn btn-large btn-inverse crop_photo" />'+
'       </form>'
);
.....

但是当我点击“crop_photo”类的按钮时$('.crop_photo').on('click',...不起作用。

哪里可能出错？

请告诉我如何正确使用第一个脚本？

Answer 1

您需要使用事件委托 -

$('#edit_photo').on('click','.crop_photo',function(){

这是您更改后的代码 -

$('#edit_photo').on('click', '.crop_photo', function () {
    $('#form_cropbox').ajaxForm({
        url: 'update.php',
        success: function (data) {}
    }).submit();
});

• http://learn.jquery.com/events/event-delegation/

Answer 2

由于这些是动态添加的，因此请执行 Event Delegation。

利用

$(document).on("eventname",'.crop_photo', function(event,ele){
 //Your code goes here
});