如何将跨度从 jQuery 绑定更改为 onClick？

Question

这个问题看似微不足道，但我真的需要掌握它的窍门。非常感谢与此相关的任何帮助。

<span class="first">This thing</span>

$(.first).click(function() {});

到现在我一直在用这个。但由于某些编码限制，我被告知将跨度从 jQuery 绑定更改为 onClick。我无法完全理解他们的意思...有什么可以帮助我解决这个问题，如果可能的话，可以更好地了解 jQuery 绑定和 onClick 绑定之间的区别。非常感谢在这方面的任何帮助。非常感谢！

Answer 1

这是对内联事件处理程序的引用 <span class="first" onclick="alert('event handler body')">This thing</span>

参考http://www.w3schools.com/js/js_events.asp

Answer 2

你必须将你的函数外部化

$(".first").click(function() {});

第一步是得到类似的东西

function spanClickFunction() {
  ... some code ...
}
$(".first).click(spanClickFunction);

然后您必须将事件移动到您的跨度

<span onClick="spanClickFunction()" class="first">This thing</span>

function spanClickFunction() {
   ... some code ...
}

您可以查看 at this Whosebug for a better understanding of the .click() and .on("click") and also this one 以了解 onClick() 和 .click() 的差异。

"basic idea" 是 onClick 只会在 元素被点击时触发 而 jQuery .click 和 .on("click") 可以 将事件侦听器添加到多个标签中 感谢他们的名字，类等... 不是 ID，因为它们在您的整个页面中必须是唯一的！ 如果您对此有进一步的疑问，我会写一个 jsFiddle :)

Answer 3

这可能是他们想要的：

span class="first" onclick="myfunc()"

它与您的 jQuery 绑定之间的区别在于您的 jQuery 选择器正在处理任何带有 class “.first” 的内容，而 onclick 版本只影响绘制的内容html.

您也可以更改 jQuery 选择器以使用唯一 ID 而不是 class。

以某种方式请求它的可能原因有很多。使用 jQuery 绑定可以更轻松地处理和操作中央 js 文件中的事件。使用 onclick 可以更容易地直接在 dom 中查看发生了什么，它还可以在不访问声明所有绑定的主 js 文件的情况下操作 onclick attr。它也可以归结为人们遵守的编码约定。

Answer 4

非常感谢您为我提出一些好的答案。我一定会关注并浏览您提供的链接。

无论如何，以下 onClick 绑定对我有用。

$(document).on('click','.first',(function(){
}));

实际上，我们在问题中提到的 span 元素的典型 jQuery 绑定遇到了问题。而上面的onClick绑定帮我们解决了。看起来很标准。

但是无论如何，非常感谢您的支持。我真的很感激:)

Answer 5

我建议你使用“.on()”jQuery的功能来绑定事件并处理绑定的事件。

官方 jQuery 的“.on()”文档说："Attach an event handler function for one or more events to the selected elements."

直接link：http://api.jquery.com/on/

工作示例：

$(document).ready(function() {
  $('.first').on( "click", function() {
    alert('you clicked me!');  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="first">This thing</span>

如何将跨度从 jQuery 绑定更改为 onClick？

How to change the span from a jQuery binding to an onClick?

jquery

binding

onclick

event-handling

jquery-events