html div ऑनक्लिक ईवेंट

Question

मैं अपने jsp पृष्ठ पर एक html div है, उस पर मैं एक एंकर टैग डाल दिया है,

$('.expandable-panel-heading:not(#ancherComplaint)').click(function() { 
    alert('123'); 
}); 

function markActiveLink(el) { 
    alert($(el).attr("id")); 
} 

है कि यहाँ के लिए नीचे दिए गए कोड प्राप्त करें,

<div class="expandable-panel-heading"> 
    <h2> 
     <a id="ancherComplaint" href="#addComplaint" 
          onclick="markActiveLink(this);">ABC</a> 
    </h2> 
</div> 

js कोड जब मैं div पर क्लिक करता हूं तो मुझे 123 संदेश के साथ अलर्ट मिला, यह ठीक है लेकिन जब मैं एबीसी पर क्लिक करता हूं तो मुझे संदेश चाहिए कि मैं markActiveLink विधि को कॉल करना चाहता हूं।

JSFiddle

क्या मेरी कोड के साथ गलत क्या है? कृपया मेरी मदद करें।

Answer 1

समस्या यह है कि लंगर पर क्लिक अभी भी अपने <div> में एक क्लिक ट्रिगर किया था। इसे "event bubbling" कहा जाता है।

• DIV क्लिक ईवेंट हैंडलर में जांच की जा रही है कि क्या वास्तविक लक्ष्य तत्व लंगर
  → jsFiddle

  $('.expandable-panel-heading').click(function (evt) { 
      if (evt.target.tagName != "A") { 
       alert('123'); 
      } 
  
      // Also possible if conditions: 
      // - evt.target.id != "ancherComplaint" 
      // - !$(evt.target).is("#ancherComplaint") 
  }); 
  
  $("#ancherComplaint").click(function() { 
      alert($(this).attr("id")); 
  }); 
  

• से घटना प्रसार रोकना था:

  वास्तव में, कई समाधान देखते हैं लंगर क्लिक श्रोता
  → jsFiddle

  $("#ancherComplaint").click(function (evt) { 
      evt.stopPropagation(); 
      alert($(this).attr("id")); 
  }); 
  

---

आपने गौर किया हो सकता है, मैं अपने उदाहरण से निम्नलिखित चयनकर्ता हिस्सा निकाल दिया है:

:not(#ancherComplaint) 

यह अनावश्यक था वर्ग .expandable-panel-heading जो भी राशि के साथ कोई तत्व है, क्योंकि #ancherComplaint इसकी आईडी के रूप में।

मुझे लगता है कि आप एंकर के लिए ईवेंट को दबाना चाहते थे। यह इस तरह से काम नहीं कर सकता क्योंकि दोनों चयनकर्ता (आपका और मेरा) सटीक उसी डीवी का चयन करते हैं। चयनकर्ता का श्रोता पर कोई प्रभाव नहीं पड़ता है जब इसे कहा जाता है; यह केवल उन तत्वों की सूची सेट करता है जिन पर श्रोताओं को पंजीकृत किया जाना चाहिए। चूंकि यह सूची दोनों संस्करणों में समान है, इसलिए कोई अंतर नहीं है।

Answer 2

तुम्हें यकीन इनलाइन घटना से निपटने को दूर करता है, तो आप jQuery है घटना उत्साह से भरा हुआ पर और के लिए पढ़ने की जरूरत है वैसे भी

टेस्ट div पर क्लिक करें और जांच लक्ष्य

Live Demo

$(".expandable-panel-heading").on("click",function (e) { 
    if (e.target.id =="ancherComplaint") { // or test the tag 
     e.preventDefault(); // or e.stopPropagation() 
     markActiveLink(e.target); 
    }  
    else alert('123'); 
}); 
function markActiveLink(el) { 
    alert(el.id); 
} 

Answer 3

इसे आजमाएं

$('.expandable-panel-heading:not(#ancherComplaint)').click(function() { 
    alert('123'); 
}); 

$('#ancherComplaint').click(function (event) { 
    alert($(this).attr("id")); 
    event.stopPropagation() 
}) 

DEMO

Answer 4

निम्नलिखित का प्रयास करें: http://jsfiddle.net/JVrNc/4/

Answer 5

बदलें इस के साथ अपने jQuery कोड:

$('.expandable-panel-heading').click(function (e) { 
     if(e.target.nodeName == 'A'){ 
      markActiveLink(e.target) 
      return; 
     }else{ 
      alert('123'); 
     } 
}); 

function markActiveLink(el) { 
    alert($(el).attr("id")); 
} 

यहाँ काम कर डेमो है। यह ए की आईडी को सतर्क करेगा।

$('.expandable-panel-heading:not(#ancherComplaint)').click(function() { 
markActiveLink();  
    alert('123'); 
}); 

function markActiveLink(el) { 
var el = $('a').attr("id") 
    alert(el); 
} 

Demo

Answer 6

मैं इस तरह stopPropagation इस्तेमाल किया होगा:

$('.expandable-panel-heading:not(#ancherComplaint)').click(function() { 
    alert('123'); 
}); 

$('#ancherComplaint').on('click',function(e){ 
    e.stopPropagation(); 
    alert('hiiiiiiiiii'); 
}); 

Answer 7

इस उदाहरण की कोशिश करें, onclick अभी भी अपने HTML से कहा जाता है, और घटना बुदबुदाती बंद कर दिया है।

<div class="expandable-panel-heading"> 
<h2> 
    <a id="ancherComplaint" href="#addComplaint" onclick="markActiveLink(this);event.stopPropagation();">ABC</a> 
</h2> 
</div> 

http://jsfiddle.net/NXML7/1/

Answer 8

कॉल क्लिक करें घटना के लिए तैयार समारोह के अंदर अपने jQuery समारोह डाल:

$(document).ready(function() { 

    $("#ancherComplaint").click(function() { 
    alert($(this).attr("id")); 
    }); 

}); 

Answer 9

मैं एक समस्या है, मैं एक div पर एक onclick के माध्यम से चाहते हैं या बंद करने के लिए मुझे नहीं होगा एक और, लेकिन मैं onclick पकड़ नहीं है। जावास्क्रिप्ट में कोड के तहत:

<script type="text/javascript"> 
     function ocultar(){ 
     document.getElementById('ver').style.display = 'none';} 
    </script> 

और मैं इसे div से फोन के रूप में

<div class="divCierre" onclick="ocultar()"></div>

Answer 10

जब div चेतावनी कुंजी

$(document).delegate(".searchbtn", "click", function() { 
     var key=$.trim($('#txtkey').val()); 
     alert(key); 
     });