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();，即=＆gt;

    $(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。正如您想要的那样动态（之前您没有提及），您必须使用实时事件而不是强>

更改此 $（文档）.on（'click'，'＃task-list li.listing'，function（e）{

to $（selector）.live（events，data，handler）{ // jQuery 1.3 +

或正如 AbdulJabbarWebBestow 实时所建议的那样，无论哪种方式，您都可以使用委托

$（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（）进行绑定后执行，处理程序必须返回false。调用.stopPropagation（）不会实现此目的。从jQuery 1.4开始，.live（）方法支持自定义事件以及所有冒泡的JavaScript事件。它还支持某些不会冒泡的事件，包括更改，提交，焦点和模糊。

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

3。当您评论 AbdulJabbarWebBestow 时，

第二个是在我们调用变量来检查 “真/假”但我有很多“点击”功能我必须使用在每一个中都有这个？有没有其他通用的方法:)我也是将点击几个类，这将不适用于他们！ -

Ans =更好地为您要处理的所有必需html元素提供公共类名，并使用id进行唯一标识。尝试使用事件的 this 内部函数，例如 this.id 将返回该类名的id。这种方法是处理动态元素的标准方法，也就是所谓的通用:)。

我希望这对你有所帮助。

请让我知道进一步的疑问/澄清。

Answer 2

试试这个，它运作良好

 $(document).unbind('click').on('click', '#task-list li.listing', function(e)
 {
       alert('Hellow world');
       e.stopPropagation();
       return false;
 });

这肯定是Javascript问题，因为如果你点击谷歌并搜索事件火两次，你会看到Angular，Jquery和骨干等都在某个地方发射事件两次甚至三次。所以，它似乎是背后的javascript。

Jquery在函数中触发两次

2 个答案: