how to bind a click event to an element in another click element

Question

The second click event that is binded to $("play") does not execute. How can i bind another click event under a click event? I cant get the data newNumber if i write the second click event outside the first click event.

This piece of code is in the slide() function.

var that = this;
$("#stop").click(function(){
    clearInterval(set);
    var newNumber = [num, numb, list]; //the value needed by click event that is binded to "play"

    $("play").click(newNumber, function() {
        num = newNumber[0];
        numb = newNumber[1];
        list = newNumber[2];
        that.slide(image, num, list, numb);
    });
});

This is easy, you don't! Never add event handlers inside event handlers. — adeneo
– adeneo, Commented Jun 13, 2014 at 17:27
What do you want to archive? Click on #stop should execute clearInterval and the play-stuff? Currently it is binding a click-handler to play every time you click stop. — dsuess
– dsuess, Commented Jun 13, 2014 at 17:28
why don't you add new Number=[num, numb, list] line to the play event? — Alexandru Severin
– Alexandru Severin, Commented Jun 13, 2014 at 17:32
Well first off your 'play' ID needs a '#.' Second, if you want two elements to do something on the same click event then give them a common class instead of calling their individual IDs. — Max Baldwin
– Max Baldwin, Commented Jun 13, 2014 at 17:32
The $('play') selector implies an element <play /> which doesn't exist. Try binding to the id $('#play') or class $('.play') depending on the appropriate situation and your given markup... — War10ck
– War10ck, Commented Jun 13, 2014 at 17:37

Shaunak D · Accepted Answer · 2014-06-13 18:56:47Z

1

Use this - the right way is to trigger :

var that = this;
var newNumber = [];
$("#stop").click(function(){
    clearInterval(set);
    newNumber = [num, numb, list]; //the value needed by click event that is binded to "play"

   $("play").click() //or $("play").trigger('click')
});

$("play").click(function() {
        num = newNumber[0];
        numb = newNumber[1];
        list = newNumber[2];
        that.slide(image, num, list, numb);
});

Use .trigger() to bind a click event explicitly.
Define the array newNumber in global scope, to use it in other events.

answered Jun 13, 2014 at 18:56

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

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

Comments

PeterKA · Accepted Answer · 2014-06-13 17:40:19Z

You're probably confusing two important terms: binding and triggering. You probably want to trigger the second event within the handler of the first, but you want to bind both to begin with anyway. Otherwise, you run into issues of binding the second event multiple times but never really triggering it.

You normally want to bind an event once at the start, but you can trigger it as many times as you need.

var that = this;
var newNumber;
$("#stop").click(function(){
    clearInterval(set);
    newNumber = [num, numb, list]; //the value needed by click event that is binded to "play"
    $("#play").click(); // trigger the second <=======
});
$("#play").click(function() {
    num = newNumber[0];
    numb = newNumber[1];
    list = newNumber[2];
    that.slide(image, num, list, numb);
});

But the question I would ask is, What Does 'this' refer to?

Collectives™ on Stack Overflow

how to bind a click event to an element in another click element

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related