मेरे पास एक बैक बटन है जो निम्न HTML का उपयोग करता है:
<div class="back-from-professors level-one">Back</div>
मैं बैक एक्शन लागू करने के लिए निम्न jQuery का उपयोग करता हूं:
jQuery(".research-box-container").on("click", ".back-from-professors.level-one", function() {
jQuery(".professor").removeClass("show");
jQuery(".professor-list").hide();
jQuery(".research-box-inner-sections-container").show();
jQuery(".capability-list").removeClass("temporary-hide");
});
मैं तब निम्नलिखित को लागू करना चाहता हूं जब
jQuery(".professor-list").on("click",".professor.show", function() {
jQuery(this).parent().find(".back-from-professors").addClass("level-two");
jQuery(this).parent().find(".back-from-professors").removeClass("level-one");
jQuery(this).next().addClass("show");
jQuery(this).removeClass("show");
});
jQuery(".professor-list").on("click",".back-from-professors.level-two", function() {
jQuery(this).parent().find(".grey-list-item.professor").addClass("show");
jQuery(this).parent().find(".grey-list-professor-details").removeClass("show");
jQuery(this).removeClass("level-two");
alert("test");
jQuery(this).addClass("level-one");
});
हालाँकि जब मैं क्लिक करता हूँ .back-from-professors.level-two यह अपेक्षित रूप से कर रहा है और फिर सतर्क कर रहा है test. यह तब वर्ग जोड़ता है level-one लेकिन फिर भी उपरोक्त मेरे पहले jQuery कोड से कार्रवाई करता है, यानी यह क्रियाओं को लागू करता है jQuery(".research-box-container").on("click", ".back-from-professors.level-one", function() {});
क्या ऐसा होना चाहिए .on()?
मैं यहां समस्या को दोहराने में सक्षम हूं ... http://jsfiddle.net/tb8uLpnL/4/ (jsfiddle अपडेट किया गया)
उत्तर:
जवाब के लिए 0 № 1आपका मुद्दा है .professor-list अंदर है .research-box-container. तो जब आप क्लिक करते हैं back, यह जुड़ी घटनाओं के लिए बुलबुले बनाता है .professor-list जिसे आप पकड़ते हैं: -
jQuery(".professor-list").on("click",".back-from-professors.level-two", function() {
जिसे आप तब जोड़ते हैं .level-one भी। फिर जब यह अगले तत्व पर फिर से बुलबुला हो जाता है .research-box-container संलग्न घटनाएं
jQuery(".research-box-container").on("click", ".back-from-professors.level-one", function() {
कक्षा के भीतर एक तत्व पाता है .level-one.
सबसे आसान समाधान भी दोनों को संलग्न करना है .research-box-container.
इसलिए:-
jQuery(".research-box-container").on("click", ".back-from-professors.level-one", function() {
jQuery(".research-box-container").on("click",".back-from-professors.level-two", function() {