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后，必须将事件处理程序绑定到该元素。通过在标记之后将代码放在页面底部或使用

来完成此操作

$(document).ready(function() { /* code here */ });

Answer 2

只是做：

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

这会将点击处理程序附加到ID为label_id的元素。在匿名函数中，您可以使用普通的Javascript this访问匹配的元素。要获取jQuery对象，它将包含在$(this)中。在正常设置中，$始终指向jQuery对象。

jQuery的优点在于您不必在HTML代码中使用onEvent处理程序。这意味着您的HTML看起来像这样：

<label id="label_id">Hello</label>

Javascript代码可以位于<script type="text/javascript"></script>标记内的网页上的任意位置。

“特殊语法”$(function(){ /* code here */ })确保函数内部的代码仅在加载整个DOM树时执行。因此，它保证每个元素都可用。

Answer 3

尝试“这个”：

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

一个jquery魔术变量。