Jquery This is Null When Used in Ajax Generated Content

Question

I have a jquery function with the following structure

function StartSong(e, sender) { }

I call it with the following html

<h4 onclick="StartSong(event, this)"> <a class="button small d3 playButton" href="javascript: var c=1;">

When the page is loaded some of the songs are shown, and when clicked to play the sender object in the function contains this data, which is expected

({jQuery18307744602853717308:8, sizcache04790260167065139:"6 18 0", sizset:false})

Although when I load more songs through ajax and append the html to the page (the same html as above) and the function is called through a click the sender variable in the function is null.

Does anyone see any reason for this?

I'm only guessing here but I think it's got something to do with the element being a h4. Can you try changing it to a div and see if it works? — slebetman
– slebetman, Commented Sep 3, 2015 at 0:19

Sudhansu Choudhary · Accepted Answer · 2015-09-02 22:27:49Z

1

Try this, change onclick="StartSong(event, this)" to onclick="StartSong(event)" and function StartSong(e, sender) to function StartSong(e) and then use e.target instead of sender. Below is the snippet.

Your HTML,

<h4 onclick="StartSong(event)"> 
<a class="button small d3 playButton" href="javascript: var c=1;">

And your js,

function StartSong(e) { 
    var sender = e.target; //now use sender as you have been using.
}

answered Sep 2, 2015 at 22:27

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

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

1 Comment

Belgin Fish Over a year ago

Unfortunately this made no difference.

Collectives™ on Stack Overflow

Jquery This is Null When Used in Ajax Generated Content

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related