jquery .append() with <script> string

[itxtme]

I am wanting to append a div with an html string. However I also need to include jquery for that div to use where it is appended to. The append function is readying the jquery instead of just using it as a string.

In php you cancel out such events with a back space. Is there a way to do the same??

Some example code

PHP Code:

<script>    
$("#addNow_{$row['id_item']}").click(function () {
$("#holder_{$row['id_item']}").append("$data");
});
</script> 


$data that works includes

PHP Code:

<div id="holder_{$row['id_item']}\"><!-- Product group holder --><div id=\"iten_content\">TEST</div></div> 


However when attempting to include the below as part of $data it fails, and I believe the cause it is taking the jquery string literally as oppose to as a string.

PHP Code:

$("#delete_{$row['id_item']}\").click(function () {
$(\"#holder_{$row['id_item']}\").remove();
}); 


Any help much appreciated!

[VIPStephan]

I’m not quite sure what you are trying to achieve but I’m pretty sure your approach is wrong. Why would you append jQuery code to an element? You should always strive for maximum separation of content and function and have your scripts in external files. Can you tell us a little more about the context in which you want to use this?

[itxtme]

I have an order that loads up with an overseeing div for every item, each item has some jquery so that the buttons for each of the menus (you can see in the pic) function correctly. All works correctly from page load where the default items are pulled from the DB.



However I also have a box that pulls products of a certain criteria that can be added to the order. This button then injects through append() the exact same row data from above and thus the product is added to the page without any reloads/ajax required. When passing the html layout of the item through append it works correctly, however it simply wont push through jquery, and as stated above every item row has its own 3 lines of jquery to 1) Make the UI menu start, hence it not being styled in the photo & 2) make the functions of those menu buttons work.

I know that the problem relates to passing through jquery in the append() method. Unfortunatley I do not understand how one can escape the jquery until its appended into the parent div. Hope that’s a little clearer. So the question is, is it possible to append jquery as a string??
Regards

[VIPStephan]

First of all, if you are appending the same rows then it’s probably best to clone() a row, make the necessary modifications, and then append it. You can clone it with any events that are attached. Also, instead of using click() which won’t work for elements added dynamically, you should look into on().

[itxtme]

Originally Posted by VIPStephan

First of all, if you are appending the same rows then it’s probably best to clone() a row, make the necessary modifications, and then append it. You can clone it with any events that are attached. Also, instead of using click() which won’t work for elements added dynamically, you should look into on().

Great thanks, and sorry I am using on() not click(), thanks for the advice. From this I am getting that your suggestion would be to clone the script portion as apposed to injecting it. I will give it a go, and report back. Cheers