jQuery 初学者 - 引用传递给 JS 函数的 HTML 对象

Question

似乎应该有更好的方法来编码:

HTML 片段:

<label onclick="addstuff(this)" id="label_id">Hello</label>

JS/jQuery 片段:

function addstuff(field){
    $('#'+field.id).before('<div>Just a random element being added…</div>');
}

当字段已经传入时，我不喜欢在 Javascript 中通过 $('#'+field.id) 引用我的字段。似乎应该有另一种方法来使用该字段在 jQuery 中引用字段传入的对象，在我看来应该更有效，但我没有运气弄清楚它。非常感谢任何建议。

Answer 1

这是一种更简单的方法。

$('#label_id').click(addstuff);

function addstuff(){
    $(this).before('<div>Just a random element being added…</div>');
}

this 指的是event 处理函数中的标签。您还可以在此实例中使用传入的事件对象。 event 对象作为第一个参数的参数隐式传递给函数

function addstuff(event){
    $(event.target).before('<div>Just a random element being added…</div>');
}

您还可以使用内联匿名函数

$('#label_id').click(function (){
    $(this).before('<div>Just a random element being added…</div>');
});

但是如果您想在多个位置使用该函数，我会坚持使用命名函数。当您进行调试时，它也很有帮助，因为您可以在单步执行时获得函数的名称。

在将元素加载到 DOM 中后，您必须将事件处理程序绑定(bind)到该元素。通过将代码放在页面底部标记后面或使用

来实现此目的

$(document).ready(function() {/* 此处代码 */});