JS: Unable to bind event dynamically

Question

I've voting mechanism in my website, if user tries to vote(up or down) I'll check whether he logged-in or not, for that I've written following code,

      $(".vote").click(function(){
         if(is_logged_in)
          {
             // Doing necessary stuff for vote up/down
          }else
            {
             // Showing Login Dialog box                        
            submitForm(".lform",function(response){

             if(data.status == "1")
               {
                 //Closing the Login Dialog Box
                 is_logged_in = 1;  // Assigning the value
                 bindEvent(".vote","click");  // Binding the Event,but can't able to it
               }
              });//Form Submission Closed
            }// Else Closed
         });// Main 'click' closed

     function bindEvent(selector,eventType){
         $(selector).bind(eventType);
        }

Instead of external function bindEvent(".vote","click") I've tried without the bindEvent(), but I can't able to bind the click event dynamically after successful login.

Pebbl · Accepted Answer · 2013-04-13 10:28:49Z

1

In order to bind something to occur on an event you need to pass a callback to be triggered when that event occurs. In your code above you aren't specifying a callback.

function bindEvent(selector,eventType){
  $(selector).bind(eventType);
}

You need something like this:

function bindEvent(selector,eventType,callBack){
  $(selector).bind(eventType, callBack);
}

Which you would use like:

bindEvent('.target', 'click', function(){
  alert('This will trigger on click!');
})

update

After re-reading your code it looks to me like what you actually need is to trigger the click event, rather than bind something to it:

$(".vote").click(function(){
  var $vote = $(this);
  if(is_logged_in) {
    // Doing necessary stuff for vote up/down
  }
  else {
    // Showing Login Dialog box                        
    submitForm(".lform",function(response){
      if(data.status == "1"){
        //Closing the Login Dialog Box
        is_logged_in = 1;  // Assigning the value
        $vote.click();
      }
    });//Form Submission Closed
  }// Else Closed
});

Using click() is the simple method, or you could use jQuery's .trigger('click') method. You may also wish to avoid the click event bubbling up to parent elements, which in this case would make sense, so you could also use .triggerHandler('click') instead.

edited Apr 13, 2013 at 10:28

answered Apr 13, 2013 at 9:44

Pebbl

36.1k6 gold badges66 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mahesh.D Over a year ago

Actually I don't need callback function here, before posting by question I've tried keeping callback also,but not worked for me.

Pebbl Over a year ago

@Mahesh.D binding without a second parameter will not do anything. You can either pass a callback or false. Passing false will prevent the event from triggering it's default behaviour, passing a callback will allow you to trigger something on that event. Other than those two options what are you trying to do? because it sounds like you don't need to use bind.

Adil Shaikh · Accepted Answer · 2013-04-13 09:53:51Z

1

You should use on() for binding dynamically created elements.

 $(document).on("click", ".vote",function(){
      if(is_logged_in)
      {
         // Doing necessary stuff for vote up/down
      }
      else
      {
         // Showing Login Dialog box                        
        submitForm(".lform",function(response){

         if(data.status == "1")
           {
             //Closing the Login Dialog Box
             is_logged_in = 1;  // Assigning the value
             bindEvent(".vote","click");  // Binding the Event,but can't able to it
           }
          });//Form Submission Closed
        }// Else Closed
});// Main 'click' closed

edited Apr 13, 2013 at 9:53

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

answered Apr 13, 2013 at 9:41

Adil

148k25 gold badges217 silver badges207 bronze badges

Collectives™ on Stack Overflow

JS: Unable to bind event dynamically

2 Answers 2

update

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

update

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related