jQuery href和onclick分离 [英] jquery href and onclick separation

问题描述

我有这样的代码

<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>

func2返回true或false.然后，仅当function2返回true时才调用func1.是吗?

func2 returns true or false. Then, func1 is called only when function2 returns true. Right ?

在学习jquery时，我发现onclick不好并且已贬值，因此我将上面的代码修改为

In learning jquery, I found out that onclick is not good and depreciated, so I modified above code to

<a id="id101" href="javascript:func1();">Link</a>

jquery
$("#id101").click(func2() {
  //same stuffs from before which was in func2
});

现在，我的问题是:

在处理完点击处理程序之后，如何在href中使用JavaScript进行处理?当func2内的条件为true时，我应该在func2的jQuery单击处理程序中在func2内调用func1吗? 还是有一些优雅的解决方案?

after click handler is taken care of, what can I do with JavaScript inside href? Should I call func1 inside func2 in jQuery click handler of func2, when condition inside func2 is true? Or is there some elegant solution?

此外，将html和事件代码分开也是不错的选择，但是ID为id101的此元素可以具有与其关联的许多事件，并且在一个大文件中，可能有很多具有许多事件的html元素.因此，当我的页面上有很多事件处理程序时，那我怎么才能更好地知道哪个html元素具有哪些事件以及与之关联的事件数呢?

Also, Separating html and events code is good, but here this element with id id101can have many events associated with it, and in a large file, there might be so many html elements with many events. So, when I have a large page with many event handlers, then how can I better know which html element has which and how many events associated with it?

根据要求对上述问题进行更多解释，

More explanation to above question as requested,

我的意思是id101可以具有onclick，onmouseover，onmouseout和许多其他此类事件.带有许多这样的事件处理程序的可以有很多这样的元素.我如何更好地发现它们?在旧的样式中，所有这样的事件处理程序都放置在一起，就像这样

I meant id101 can have onclick, onmouseover, onmouseout and many other such events. There can be many such elements with many such event handlers. How do I better spot them ? In old style, all such event handlers are all placed together, like this

<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>.

我并不是说这很好，但是至少我可以看到它具有此onclick事件.但是现在，当将其分割为jquery文件时，我必须首先在jquery文件中搜索id101，然后检查与其相关的事件，这对于具有许多元素和相关事件处理程序的html文件可能是个问题.有没有更好的方法来查找该信息?

I am not saying this is good, but atleast I can see that it has this onclick event. But now when separting this into jquery file, I have to search first this jquery file for id101 and then check events associated with it, which can be problem with html file having many elements and associated event handlers. Is there any better way to to find that information ?

推荐答案

如果我理解正确，则希望避免使用内联Javascript，但是您也希望能够看一眼a并知道它是否具有事件绑定到它.不幸的是，没有一种可接受的方式来表示这一点，因为内联Javascript是个坏消息.也许您可以给您的元素一个哑类，以帮助您将来的可读性.除此之外，请忘记整个func1和func2内容.只需在您的单击绑定内使用匿名函数即可.

If I understand correctly, you want to avoid the inline Javascript, but you also want to be able to glance at an a and know if it has an event bound to it. Unfortunately, there isn't an acceptable way to denote this, as inline Javascript is bad news. Perhaps you can just give your element a dummy class to aid your future readability. Other than that, forget the whole func1 and func2 thing. Just use an anonymous function inside of your click binding.

<a id="some_id" class="optional_has_click">Click Me</a>

<script type="text/javascript">
  $(document).ready(function(){

    $("#some_id").click(function(){

      // do something
      alert( $(this).attr("id") );

    });

  });
</script>

另外，删除href也会删除视觉提示，因此您可以使用虚拟类使它看起来像a.

Also, removing the href will remove the visual cue, so you can use your dummy class to make it look like an a.

这是为您准备的小提琴: http://jsfiddle.net/zzTSt/1/

Here is a fiddle for you: http://jsfiddle.net/zzTSt/1/

这篇关于jQuery href和onclick分离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！