Pass 'this' from one function to another in javascript?

Question

function removeNewsItem(id,idStamp,obj){
 $('#whiteCover')show();

 $('#contentOfBox').html= ('Are you sure you want ot completely remove this news item?<br/><br/><div style="text-align:center;"><input type="button" class="button blue medium" onclick="removeNewsItemConfirmed(\'' + id + '\',\''+idStamp+'\','+**obj**+')" value="Yes"/> <input type="button" class="button red medium" value="No" onclick="resetContentBox();"/></div>');

 $("#whiteCoverContainer").fadeIn();
}

function removeNewsItemConfirmed(id,idStamp,obj){
   alert(obj);
   $(obj).remove();
   return;
}

<tr><td onclick=removeNewsItem('111','134234',this)></td></tr>

When I click on the td with the removeNewsItem on it, i cannot seem to be able to pass the 'this' element on to the next function: After the user clicks, they are shown a message asking to confirm deletion, but when they click it the 'this' is not getting passed properl, or more to the point I can't fihure out how...

Could somebody please help: How can I pass obj onto another inline onclick event like above?

That's not the proper use of jQuery methods. Do you actually know how to program in JavaScript? — Rob W, Feb 09 '12 at 21:40
You forgot the quotes (") and this doesn't represent the HTML string but a dom object. But "this" should be passed properly : http://stackoverflow.com/questions/925734/whats-this-in-javascript-onclick — Julien, Feb 09 '12 at 21:41
Yeah, what's with that code. `$('#contentOfBox').html=` ???. Then jquery and `onclick` ??? I think you need to learn proper js first, try with a simpler example, and then come back here with proper code. — elclanrs, Feb 09 '12 at 21:43

score 1 · Answer 1 · answered Feb 09 '12 at 21:44

It seems like you should be using events. If you are using jQuery use on() to attach events instead of attributes. More about on().

Using this function instead of onclick will return this to your function. As an example:

<table>
<tr><td>123</td></tr>
<tr><td>456</td></tr>
</table>

And some JS

// Will have access to this and has ev which is the event
function removeNewsItem(ev){
   var $this = $(this);
}

$('table').on('click', 'td', removeNewsItem);

If you need to attach data values to your table cells you can do that with data attributes and jQuery's data().

And this looks the tightest still! I am going to have to do some erading to understand it all tho. Thanks a lot! For all you replies :) — , Feb 09 '12 at 22:09

score 1 · Answer 2 · answered Feb 09 '12 at 21:51

Your events could look like this (without changing too much of your existing markup):

$(".newsItem").click(function(){
    var id = $(this).attr('id');
    var idStamp = $(this).attr('idStamp');
    $('#whiteCover')show();  

    $('#contentOfBox').html= ('Are you sure you want ot completely remove this news item?<br/><br/><div style="text-align:center;"><input type="button" class="button blue medium" onclick="removeNewsItemConfirmed(\'' + id + '\',\''+idStamp+'\')" value="Yes"/> <input type="button" class="button red medium" value="No" onclick="resetContentBox();"/></div>'); 

    $("#whiteCoverContainer").fadeIn();  
});

function removeNewsItemConfirmed(id,idStamp){              
   alert(id);              
   $("#"+id).remove();              
   return;              
}

Your HTML will then look like this:

<tr><td id='111' idStamp='134234' class='newsItem'></td></tr>

Thank you very much! That's awesome, I had never thought of adding additional attributes to the . — , Feb 09 '12 at 22:06

score 0 · Accepted Answer · answered Feb 09 '12 at 21:49

this is in reference to the clicked element. If you add a new element with its own onclick handler then this will be in reference to that. Not the one that created it.

So this will never work the way you are thinking

onclick="removeNewsItemConfirmed(\'' + id + '\',\''+idStamp+'\','+**obj**+')"

Instead you need to create a reference that you can keep track of.

function removeNewsItem(id,idStamp,obj){
   $(obj).addClass('markedForDeletion');
   $('#whiteCover')show();
   $('#contentOfBox').html= ('Are you sure you want ot completely remove this news item?<br/><br/><div style="text-align:center;"><input type="button" class="button blue medium" onclick="removeNewsItemConfirmed()" value="Yes"/> <input type="button" class="button red medium" value="No" onclick="resetContentBox();"/></div>');

   $("#whiteCoverContainer").fadeIn();
}

function removeNewsItemConfirmed(){
   $('.markedForDeletion').remove();
}

Overall there are much better ways to handle all of this, but hopefully this gets you going.

This is also spot on! I am quite new to jQuery, and to me this looks quite tidy... — , Feb 09 '12 at 22:08

Pass 'this' from one function to another in javascript?

3 Answers3