开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜