How trigger 2 events with 1 selector?
When the user clicks on "a.open-popup", I need some HTML to change (1 function) and a simplelightbox to pop open (another function). How do I do this? I can only get 1 of the 2 functions to trigger.
HTML:
<div>
<p class="plan-msg">Plan message</p>
<div class="completed-button">
<a href="#popup01" class="open-popup">Did it</a>
</div>
</div>
jQuery function 1 (HTML changes):
jQuery('a.open-popup').click(function(event){
var $parent = jQuery(this).parent();
event.preventDefault();
$parent.siblings('.plan-msg').remove();
$parent.removeClass('completed-button')
.addClass('add-inv-button ')
.html('Add to Plan');
});
jQuery function 2 (open simplelightbox):
$(function(){
jQuery("a.open-popup").click(function(event) {
event.preventDefault();
jQuery(this).simpleLightbox({开发者_开发百科 closeLink:'a.close' });
});
})
Thanks.
jQuery("a.open-popup").simpleLightbox({ closeLink:'a.close' });
you're missing the .click()
. It should be:
jQuery("a.open-popup").click(function(evt) {
evt.preventDefault();
jQuery(this).simpleLightbox({ closeLink:'a.close' });
});
This will work in conjunction with your other handler, which was already correct.
edit
ok, the following will work if you have included the code for simpleLightbox
before this block of code runs:
$(function() {
jQuery("a.open-popup").simpleLightbox({
closeLink: 'a.close'
});
jQuery('a.open-popup').click(function(event) {
var $parent = jQuery(this).parent();
event.preventDefault();
$parent.siblings('.plan-msg').remove();
$parent.removeClass('completed-button')
.addClass('add-inv-button')
.html('Add to Plan');
});
});
I have posted a working example of this on jsFiddle http://jsfiddle.net/fZPjg/.
Note: I have used the $(function() {...})
notation to be consistent with your original post, but jQuery recommends that you use $(document).ready(function() { ... })
instead. Presently the two forms function identically.
you can use .trigger
to fire a custom trigger when you are inside the handler of the first event, here is the DEMO
精彩评论