Question

我在听取点击链接。当我在点击链接时观察调试器中发生的事情时，它会在下面的Javascript中循环两次。这意味着它似乎什么都不做，但它是第一次工作，只是撤消了第二次。

以下是相关的Javascript：

$("#list a").click(function(e) {
    var id = $(e.currentTarget).attr("id");
    $("div#edit_due_at_"+id).toggleClass("hidden");
    $("span.due_"+id).toggleClass("hidden");
    $(this).addClass("hidden");
    e.preventDefault();
    return false
});

和HTML：

        <ul id="list">
      <li class="up" id="32">
            <span class="cname ">sally and eddie</span>
            <br>
            <span class="time-ago">Added 6 days ago.</span><br>
              <span class="time-ago">
                <a href="#" id="32">add due date</a>

              </span>
          <form accept-charset="UTF-8" action="/contacts/32" class="edit_contact" id="edit_contact_32" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="dwUgdONDp1TWL6zpdI1+UYvcy3KvIxWUIoRiqMwJklY=" /></div>  
                    <input id="contact_done" name="contact[done]" type="hidden" value="true" />
            <input id="contact_date_done" name="contact[date_done]" type="hidden" value="2012-11-21" />
                    <input class="btn btn-small hidden done_btn" name="commit" type="submit" value="Mark as done" />
</form>      </li>
      <li class="up" id="33">
            <span class="cname ">adding a contact for next Monday</span>
            <br>
            <span class="time-ago">Added 5 days ago.</span><br>
              <span class="time-ago">
                <a href="#" id="33">add due date</a>

              </span>
          <form accept-charset="UTF-8" action="/contacts/33" class="edit_contact" id="edit_contact_33" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="dwUgdONDp1TWL6zpdI1+UYvcy3KvIxWUIoRiqMwJklY=" /></div>  
                    <input id="contact_done" name="contact[done]" type="hidden" value="true" />
            <input id="contact_date_done" name="contact[date_done]" type="hidden" value="2012-11-21" />
                    <input class="btn btn-small hidden done_btn" name="commit" type="submit" value="Mark as done" />
</form>      </li>........</ul>

我认为return false会阻止它再次骑行？

Answer 1

这是你需要的吗？

// add a custom click handler
$("#list a").on("click.myHandler", function(e) {
    e.preventDefault();
    var id = $(e.currentTarget).attr("id");
    $("div#edit_due_at_"+id).toggleClass("hidden");
    $("span.due_"+id).toggleClass("hidden");
    $(this).addClass("hidden");
    // remove the custom click handler
    $(this).off("click.myHandler");
});

注意我删除了返回false，因为e.preventDefault（）执行相同的

Answer 2

问题是我在HTML头中引用了两个contacts.js文件。在rails中我复制了contacts.js.coffee文件并将其设为contacts.js，但我没有删除原始的contacts.js.coffee文件。删除第二个文件后，它与原始JS和@Sander的JS一起工作正常。

Javascript点击监听器循环两次

2 个答案: