DIV点击事件错误地触发其他DIV点击事件

Question

我正在尝试绑定div元素的click事件以显示它们各自的模态。

我传递了每个元素的ID，并且函数报告它绑定了正确的ID。

当我实际点击div时，始终会触发click事件以获取最终ID。

我已经检查了DIV的HTML，并且它们都有正确的ID。

<div id="e800" data-target="#event800" class="event" data-eid="800">
  <p>Click Me</p>
  <div id="event800" style="display: none;" role="dialog" tabindex="1" class="modal">
     <p>I am another DIV</p>
  </div>
</div>

<div id="e801" data-target="#event801" class="event" data-eid="801">
  <p>Click Me</p>
  <div id="event801" style="display: none;" role="dialog" tabindex="1" class="modal">
     <p>I am another DIV</p>
  </div>
</div>

<div id="e802" data-target="#event802" class="event" data-eid="802">
  <p>Click Me</p>
  <div id="event802" style="display: none;" role="dialog" tabindex="1" class="modal">
     <p>I am another DIV</p>
  </div>
</div>


function BindEvents(ids) {

  for(var i = 0, l = ids.length; i < l; i++) {
    /* ID of element - ex: #e800 */
    var e = "#e" + ids[i];

    /* ID of element I want to show - ex: #event800 */
    var id = $(e).data('target');

    /*
       This console.log outputs the correct e and id. Ex:
       "Binding click of #e800 to show #event800"
    */
    console.log("Binding click of " + e + " to show " + id);

    $(e).on('click', function(ev) {
      /*
        This console.log outputs the e and id of the very last div.
        I click #e800 and the output for this is :
        "Click event of #e802 now showing #event802"
      */
      console.log("Click event of " + e + " now showing " + id);
      $(id).show();
      $('#backdrop').show();
    });

    /*
      $(id) element is a child of the $(e) element.
      If we do not call ev.stopPropagation() then
      the click will also be triggered in $(e).
      This would cause the modal to reshow directly
      after being hidden.
      Which means once clicked, it would never hide.
    */

    $(id).on('click', function(ev) {
      ev.stopPropagation();
      $(id).hide();
      $('#backdrop').hide();
    });
  }
}

我的问题的解决方案是在重复问题中。

虽然我已将代码更改为已接受的答案并删除了循环。

function BindEvents(ids) {

  $(document).on('click', '.event-bind', function() {
    var id = $(this).data('target');

    $(id).show();
    $('#backdrop').show();

    $(id).one('click', function(ev) {
      ev.stopPropagation();
      $(id).hide();
      $('#backdrop').hide();
    });

  });
}

Answer 1

我建议在所有这些上使用> （即class =“showModalOnClick”）“edit” - 可能会改变它以适应你的需求更好。

然后，使用单个绑定事件：

    // bind to document instead of directly to the class in case you have 
    // some of the items to click being added after the document is loaded.
    $(document).on('click','.edit',function(){
        var $this = $(this);
        var e = $this.attr('id');
        var id = $this.data('target');

        // This console.log outputs the e and id of the very last div.
        // I click #e800 and the output for this is :
        // "Click event of #e805 now showing #event805"
        console.log("Click event of " + e + " now showing " + id);
        $(id).show();
        $('#backdrop').show();

        // $(id) element is a child of the $(e) element.
        // If we do not call ev.stopPropagation() then
        // the click will also be triggered in $(e).
        // This would cause the modal to reshow directly
        // after being hidden.
        // Which means once clicked, it would never hide.
        // .one will run this event once and unbind after
        $(id).one('click', function(ev) {
            ev.stopPropagation();
            $(id).hide();
            $('#backdrop').hide();
        });
    });