Question

在jQuery中，我一直使用按钮创建元素，然后引用使用this点击的按钮。例如：

$(".addphoto").click(function(){
    photo_count++;
    $(this).parent().before("<label>Add Photo: <input type='file' name='photo[" + photo_count + "]'></label>");
    });

我想用脚本创建的按钮做同样的事情，但由于jQuery只能定位加载时存在的元素，因此我将document定位并使用.on()代替：

$(document).on("click", ".addphoto", function(){
    photo_count++;
    $(this).parent().before("<label>Add Photo: <input type='file' name='photo[" + photo_count + "]'></label>");
    });

问题是this现在引用document而不是刚刚点击的按钮。如何引用该按钮？

Answer 1

如果您给原始按钮一个ID，您可以使用.click（）函数来引用它。

HTML

<div class="x">
    <div>
        <button class="addphoto" id="addPhotoButton">addphoto</button>
    </div>
</div>

Javascript（JQuery）

var photo_count = 0;
$('#addPhotoButton').click(function () {
    photo_count++;
    $(this).parent().before("<div><label>Add Photo: <input type='file' name='photo[" + photo_count + "]' id='addPhotoID_"+photo_count+"'></label></div>");
});

JSfiddle网址：http://jsfiddle.net/PLk2G/5/

Answer 2

尝试使用.live()代替.click()方法。

Reference Link for live method.

编辑：我将添加简短说明。

.live()方法为所有与当前选择器匹配的元素附加事件处理程序，现在和将来。

Answer 3

而不是$(this)，传递您的活动并引用$(e.currentTarget)。

$(document).on("click", ".addphoto", function(e){
    photo_count++;
    $(e.currentTarget).parent().before("<label>Add Photo: <input type='file' name='photo[" + photo_count + "]'></label>");
});

Javascript / jQuery如何引用创建的元素

3 个答案: