DIVs 클릭 이벤트가 다른 DIV 클릭 이벤트를 잘못 트리거 함

Question

div 요소의 클릭 이벤트를 바인드하여 해당 모달을 표시하려고합니다.

각 요소의 ID를 전달하고 함수가 올바른 ID를 바인딩하고 있다고보고합니다.

실제로 div를 클릭하면 클릭 이벤트가 항상 최종 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

나는 그들 모두에 (즉 클래스 = "showModalOnClick") "편집"를 클래스를 사용하여 두는 것이 좋습니다. 당신은뿐만 아니라 그 div에 포함 할 수 있습니다

// 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(); 
     }); 
    });