Question

Guys i am facing a problem with wildcard character in jquery. Please help if possible.

I am using jQuery like function for binding a click to an id eg. proceed_10,proceed_11. Now if i click on proceed_10 for first time everything works fine. But if i click on an image with id as proceed_10 again then it executes twice.Then if i click on some other proceed image with id proceed_5 it executes thrice. Here is a minor code snippet to review :

$("[id*='applybut_']").live('click',function(){ 

        var idfinder = null; var currid = null;
        idfinder = $(this).attr('id').split('_');
        currid = idfinder[1];
        $.ajax({
            url: "someurl",   
            type: 'POST',
            dataType: 'json',
            data: {},
            error: function(data){ },
            success: function(data){
                if(data.success == true)
                {
                    messyhtml+= '<img src="'+proceedimgsrc+'" id="proceed_'+currid+'" style="cursor:pointer;">';
                    $("[id*='proceed_']").live('click',function(){
                        var foostr = $(this).attr('id').split('_');
                        var fooid = foostr[1];
                        var barid = $('input[name="bar_id"]:checked').val();
                            if(fooid != '' && barid != '')      //This loops executes twice,thrice, and so on...
                            {
                                $.ajax({
                                    url: "someurl",   
                                    type: 'POST',
                                    dataType: 'json',
                                    data: {'fooid':fooid,'barid':barid},
                                    error: function(data){ },
                                    success: function(data){
                                        if(data.success == true) {
                                            //
                                        } else if(data.success == false) {
                                            //
                                        }
                                    }
                                }); 
                            }                               

                    });
                    $(".popcontainer").html(messyhtml);
                }
            }
        });
    });

Answer 1

The line which reads…

$("[id*='proceed_']").live('click',function(){

…is being executed each time a click is made as it’s embedded within the event handler for…

$("[id*='applybut_']").live('click',function(){ 

The upshot of this is that you are subscribing multiple (identical) handlers to all proceed_* items – one each time an apply_but_* is clicked. Hence your behaviour.