jQuery तालिका पंक्ति घटना भी जब मैं एक लिंक

Question

यहाँ क्लिक फायरिंग क्लिक करें मैं अब तक है, हो रही पंक्ति संख्या है महान काम कर रहा है लेकिन मैं इसे बनाने के लिए इतना है कि जब मैं तालिका में लिंक पर क्लिक करें की जरूरत है, यह does not समारोह के अंदर कोड आग।

<table> 
    <tr class="row"> 
    <td>A</td> 
    <td><a class="link" href="foo.html">Foo</a></td> 
    </tr> 
    <tr class="row"> 
    <td>B</td> 
    <td><a class="link" href="Bar.html">Bar</a></td> 
    </tr> 
</table> 


<script> 
$(function(){ 
    $('.row:not(.link)').click(function(){ 
     var $row = $(this).index(); 
    }); 
}); 
</script> 

Answer 1

चयनकर्ता .row: नहीं (.link) एक वर्ग "पंक्ति" है और जो नहीं है के लिए आप क्या देख रहे हैं वर्ग "लिंक" नहीं है, कि सभी तत्वों का चयन करेंगे।

आप a.link तत्वों की क्लिक करें घटना के भीतर event.stopPropagation उपयोग करने के लिए इतना है कि क्लिक करें घटना माता-पिता, जो पंक्ति में शामिल करने के लिए प्रचारित नहीं किया गया है की जरूरत है।

इस प्रयास करें:

<table> 
    <tr class="row"> 
     <td>A</td> 
     <td><a class="link" href="foo.html">Foo</a></td> 
    </tr> 
    <tr class="row"> 
     <td>B</td> 
     <td><a class="link" href="Bar.html">Bar</a></td> 
    </tr> 
</table> 

<script> 
    $(function(){  
     $('.row').click(function(){   
      var $row = $(this).index();  
     }); 
     $('.row .link').click(function(e){ 
      e.stopPropagation(); 
     }); 
    }); 
</script> 

Answer 2

आप लिंक के क्लिक करें घटना में event propagation को रोकने के लिए की जरूरत है - यहाँ एक नमूना है: http://jsfiddle.net/6t8u7/1/

आप देख सकते हैं, लिंक पर क्लिक करने के लिए सिर्फ एक ईवेंट सक्रिय। पंक्ति पर क्लिक करने से दूसरे घटना को आग लगती है।

कारण आप वर्तमान व्यवहार हो रही है उस लिंक से क्लिक करें घटना पेरेंट तत्व करने के लिए "ऊपर बुलबुले" है।

Answer 3

यहाँ jQuery में त्वरित सुधार, बस instanceof

$("#news-table tr").click(function(e){ 
     if((e.srcElement instanceof HTMLAnchorElement)!=true )console.log("IIIIIIHA HA!"); 
    }); 

Answer 4

बस थोड़ी देर हो चुकी उपयोग करते हैं, लेकिन यह पहली कड़ी गूगल में मैं रिश्तेदार विषय का हल के लिए खोज में खोला गया है। इसलिए, यह किसी के लिए उपयोगी हो सकता है:

$(".clickableRow").click(function(e) { 
 
    if (e.target.nodeName != "A") { 
 
    window.document.location = $(this).attr("href"); 
 
    } 
 
});

एक पंक्ति, मैं standart मतलब है, में लिंक हमेशा की तरह काम करेंगे, और इस उदाहरण मार्कअप तीन स्वतंत्र लिंक सक्रियण होगा:

<tr class="clickablerow" href="profile.html"> 
 

 
    <td>John Doe, the VP</td> 
 
    <td><a href="print.html" target="_blank">Print</a><a href="chat.html" target="_blank">Chat</a></td> 
 
    
 
</tr>

Answer 5

एक डेटा विशेषता के साथ

, वहाँ एक सीएल की आवश्यकता नहीं है गधा:

$(document).on('click', '[data-href]', function(e) { 
    if($(e.target).hasClass('ignore')) 
     return; 
    var ignore = ['input', 'a', 'button', 'textarea', 'label']; 
    var clicked = e.target.nodeName.toLowerCase(); 
    if($.inArray(clicked, ignore) > -1) 
     return; 
    window.location = $(this).data('href'); 
}); 

प्रयोग उदाहरण (tr सिर्फ एक उदाहरण है - आप div, आदि का उपयोग कर सकते):

<tr data-href="your_url"> 
    <td class="ignore">Go nowhere</td> 
    <td>Go to your_url</td> 
    <td><a href="another_url">Go to another_url</a></td> 
    <td><input type="text" value="Go nowhere"></td> 
</tr> 

Answer 6

तुम भी स्पष्ट रूप से दूसरे समारोह में पंक्ति को चुनकर बिना उपयोग कर सकते हैं।

$(function(){  
    $('.row').click(function(){   
     var $row = $(this).index();  
    }); 
    $('.link').click(function(event){ 
     event.preventDefault(); 
     event.stopPropagation(); 
    }); 
}); 

Answer 7

बस जोड़ें: if (e.target.tagName == 'A') return; पंक्ति क्लिक करने के लिए और लिंक तत्व अपने तर्क का उपयोग करेगा।

यहाँ और अधिक विस्तृत उदाहरण है:

$("#table tr").click(function(e) { 

    // Skip if clicked on <a> element 
    if (e.target.tagName == 'A') return; 

    // Logic for tr click ... 

});