javascript - Jquery 在函数中触发两次

Question

我在使用 jquery 时遇到了问题，目前使用 v2.1，问题是它触发了以下两次! 我无法完成这项工作，不知道为什么会发生这种情况:(

$(document).on('click', '#task-list li.listing', function(e){
    e.preventDefault();
    e.stopPropagation();
    alert("hello!"); 
    $(".hiddentaskedit").show();
    $(".lefthelp1").hide();
    $("#task-list>li.list-group-item").removeClass("active");
    $(this).addClass("active");
    $("#listsbtfrm")[0].reset();
    $("#datatextchk").focus();
    var a = $(this).children(".view").children(".checkbox").children(".task-name1").html();
    var b = $(this).children(".view").children(".checkbox").children(".task-name2").html(); 
    var c = $(this).children(".view").children(".checkbox").children(".task-name3").html();     
    if(a.length>0){ $("#datatextchk").val(a); }
    if(b.length>0){ $("#datatextchk2").val(b); }
    if(c.length>0){ $("#datatextchk3").val(c); }
    return false;
    });

wv

Answer 1

那是因为有e.stopPropagation();之后e.preventDefault(); 。尝试使用e.preventDefault();之后e.stopPropagation(); 。

自 e.stopPropagation();停止流向相关元素，其中 e.preventDefault();停止自然流动，换句话说，

<强> e.stopPropagation(); 阻止事件在事件链中向上冒泡。

<强> e.preventDefault(); 阻止浏览器对该事件执行默认操作。

$(document).on('click', '#task-list li.listing', function(e){
    alert("hello!"); 
    $(".hiddentaskedit").show();
    $(".lefthelp1").hide();
    $("#task-list>li.list-group-item").removeClass("active");
    $(this).addClass("active");
    $("#listsbtfrm")[0].reset();
    $("#datatextchk").focus();
    var a = $(this).children(".view").children(".checkbox").children(".task-name1").html();
    var b = $(this).children(".view").children(".checkbox").children(".task-name2").html(); 
    var c = $(this).children(".view").children(".checkbox").children(".task-name3").html();     
    if(a.length>0){ $("#datatextchk").val(a); }
    if(b.length>0){ $("#datatextchk2").val(b); }
    if(c.length>0){ $("#datatextchk3").val(c); }
    e.stopPropagation();
    e.preventDefault();
    return false;
    });

如果仍然不起作用，请删除 e.preventDefault();从代码即 =>

    $(document).on('click', '#task-list li.listing', function(e){
    alert("hello!"); 
    $(".hiddentaskedit").show();
    $(".lefthelp1").hide();
    $("#task-list>li.list-group-item").removeClass("active");
    $(this).addClass("active");
    $("#listsbtfrm")[0].reset();
    $("#datatextchk").focus();
    var a = $(this).children(".view").children(".checkbox").children(".task-name1").html();
    var b = $(this).children(".view").children(".checkbox").children(".task-name2").html(); 
    var c = $(this).children(".view").children(".checkbox").children(".task-name3").html();     
    if(a.length>0){ $("#datatextchk").val(a); }
    if(b.length>0){ $("#datatextchk2").val(b); }
    if(c.length>0){ $("#datatextchk3").val(c); }
    e.stopPropagation();
    return false;
    });

我已经在函数底部编写了这两个函数，因为它支持其他浏览器(在我上面使用它的实验中，我的函数被破坏了)。

更新

1. 由于您想要动态(并且您之前没有提到这一点)，因此您必须使用 live 事件而不是 on

更改此$(document).on('click', '#task-list li.listing', function(e){

到 $( 选择器 ).live( 事件、数据、处理程序 ){//jQuery 1.3+

或者 正如AbdulJabbarWebBestow所建议的，live已被贬值，无论哪种方式，您都可以使用delegate

$( document ).delegate( '#task-list li.listing', "click", function(e) {//jQuery 1.4.3+

2. *更多详细信息*(来源 http://api.jquery.com/live/ )

jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.


Chaining methods is not supported. For example, $( "a" ).find( ".offsite, .external" ).live( ... );  is not valid and does not work as expected.


Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.


On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:


Use natively clickable elements such as a or button, as both of these do bubble to document.
Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.


Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement). Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.


Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.


The .live() method interacts with other event methods in ways that can be surprising, e.g., $( document ).off( "click" ) removes all click handlers attached by any call to .live()!

对于仍在使用 .live() 的页面，此版本特定差异列表可能会有所帮助:

在 jQuery 1.7 之前，要阻止其他处理程序在使用 .live() 进行一次绑定(bind)后执行，该处理程序必须返回 false。 调用 .stopPropagation() 将无法实现此目的。 从 jQuery 1.4 开始，.live() 方法支持自定义事件以及所有冒泡的 JavaScript 事件。 它还支持某些不冒泡的事件，包括更改、提交、聚焦和模糊。

在 jQuery 1.3.x 中，只能绑定(bind)以下 JavaScript 事件:click、dblclick、keydown、keypress、keyup、mousedown、mousemove、mouseout、mouseover 和 mouseup。

3. 正如您对 AbdulJabbarWebBestow 的评论，

The second one is working in which we called the variable to check "true/false" but I have lots of "click" functions do I have to use this in every 1 of them? Is there any other universal method :) Also I will be clicking few classes and this will not work on them ! –

Ans= 最好为您想要处理的所有必需 html 元素提供通用类名称，并使用 id 进行唯一标识。尝试在事件函数内部使用 this ，例如 this.id 将返回该类名的 id。此方法是处理动态元素的标准方法，因此称为通用方法:)。

希望这对您有帮助。

如有进一步疑问/澄清，请告诉我。