jQuery डिव पर क्लिक करके ईवेंट, बाल डिव

Question

सिवाय मैं निम्न HTML है:

<div class="server" id="32"> 
    <a>Server Name</a> 
    <div class="delete-server">X</div> 
</div> 

मैं यह इतना बनाने के लिए उपयोगकर्ताओं द्वारा क्लिक server div यह एक संपादन संवाद को लाता है कोशिश कर रहा हूँ। समस्या बस कर रही है:

$(".server").click(function() { 
    //Show edit dialog 
}); 

काम नहीं करता है, क्योंकि अगर वे हटाए गए एक्स पर क्लिक करते हैं, तो यह संपादन संवाद लाता है। पूरे div server को delete-server div को छोड़कर क्लिक ईवेंट कैसे बना सकता है।

Answer 1

$(".server").on('click', ':not(.delete-server)', function (e) { 
    e.stopPropagation() 
    // Show edit dialog 
}); 

यहाँ बेला है: http://jsfiddle.net/9bzmz/3/

Answer 2

बस जाँच तत्व जो ईवेंट ट्रिगर किया क्या:

$(".server").click(function(e) { 
    if (!$(e.target).hasClass('delete-server')) { 
     alert('Show dialog!'); 
    } 
});​ 

LIVE DEMO

Answer 3

इस हल करने के लिए एक वैकल्पिक तरीका है:

$(".server").click(function() { 
    // show edit dialog 
}); 
$(".delete-server").click(function (event) { 
    // show delete dialog for $(this).closest(".server") 
    event.stopPropagation(); 
}); 

बस सुनिश्चित करें कि .delete-server पर जारी एक क्लिक ईवेंट मूल तत्व तक बबल नहीं होता है।

Answer 4

केवल यह मेरे लिए काम करता है।

js_object एक $('body')

jq_object.on('click', '.js-parent :not(.js-child-1, .js-child-2)', function(event) { 
    //your code 
}); 

jq_object.on('click', '.js-child-1', function(event) { 
    //your code 
}); 

jq_object.on('click', '.js-child-2', function(event) { 
    //your code 
}); 

अपने मामले सामने की तरह मेटा माता-पिता के लिए jQuery वस्तु है:

सर्वर - js माता पिता

हटाना सर्वर - js वाले बच्चे -1

jq_object.on('click', '.server :not(.delete-server)', function(event) { 
    //your code 
}); 

jq_object.on('click', '.delete-server', function(event) { 
    //your code 
});