JQuery usage within Wordpress thickbox elements

601 Views Asked by At

I am currently working on a piece of code that has a thickbox integrated within it. The thickbox works and its content load up as they should, however I am struggling to make JQuery work on the elements within the thickbox.

The thickbox code launches:

<div id="my-content-id" style="display:none;">
 <p>
<div class="mass_pc_wrapper">
<input name="mass_select" class="mass_input" id="kd_local_mass_text" 
type="text" />
<input class="kd_mass_go" id="kd_mass_go" type="submit" value="Mass 
Select/Deselect">
</div>
</p>
</div>

This is launched into a thickbox on a click earlier in the code. The problem is, I would like to use my JQuery to work onclick of the submit button. No matter what I try, i cannot get it to register a click. I have read in places it is to do with DOM, but this goes over my head, I'm more of a PHP programmer by nature.

The thickbox launches itself within a new modal by clicking

<a href="#TB_inline?width=600&height=550&inlineId=my-content-id" class="thickbox">My link</a>

When that link if clicked in the parent content, it loads up the thickbox into a dynamically created #TB_window element.

I would be grateful if anyone could give me an example code of JQuery that would basically show an alert of the contents of kd_local_mass_text on the click of the button.

2

There are 2 best solutions below

2
Curiousdev On

For dynamically created element you have to use .live() However, live() was deprecated in 1.7 in favour of on(), and completely removed in 1.9. The live() signature:

If you have greater version of jQuery than 1.9 you can use jQuery.fn.on

I would recommend to use .on below is a signature of .on function

$(document).on( eventName, selector, function(){} );

$("body").on("click", "#YOUR_DYNAMICALLY_CREATED_ELEMENT", function(event){
    //Do Some stuff
});
0
Grimace On

Props to Curiousdev, who gave me almost the correct answer to my code. I continued to do some sleuthing based on the response given, and it turns out I had to use document instead of "body". So what worked for me was:

$(document).on("click", '.mylink', function(event) { 
alert("new link clicked!");
});