Problems with Code not working after jQuery Post

Hi Folks - I am having a problem with some code, and I not sure what the heck is happening. I have a web page, in the HEAD it loads in the jQuery code, and then it loads in my particular functions for hopefully editing certain information, but right now, I am just trying to have it display and alert: jQuery(document).ready(function () {    $('img.deleteBullet1').click(function(event){       var val = $(this).attr('myValue');       alert(val);   });    }); Within the Body of my code, I have this function which is designed to post data to a table and on success read a table: function addBullet2(){     var val = $("#bulletText").val();     if( val.length == 0 ){ alert("Please enter text for this bullet."); return false; };     if( val.length > 0 ){        $.post("_inc/act_addBullets.cfm", $("#bulletForm").serialize(),            function(){                     $.ajax({                 type: "GET",           cache: false,           url: '_inc/dsp_allBullets.cfm',           data: "itemid=" + <cfoutput>#attributes.itemid#</cfoutput>,           dataType: "html",           success: function(html){                       document.getElementById('bulletText').value = '';           temp = html;           temp = temp.substr(48, ((temp.length)-48));             $("#bulletsprocess").html(temp);             } // This closes the Success         }); // This closes the Ajax process       } // This closes the success function to the Post     ); // This closes the Post function   }; // This closes the If logic } Here's the problem: My addbullet function posts fine and reads the table correctly. If I click on the img that is associated with the delete bullet, it works fine before I post any thing. After I post, the delete bullet click function no longer works. Any ideas?   Thanks, Doug

This says, $('img.deleteBullet1').click Find all the images with class deleteBullet1 and listen for a click event AT THE TIME I AM RUNNING. (Sorry to yell- but it's an important distinction. ;) If you want to ensure it gets images added to the DOM after the dom loads, you can use the "on" feature: http://api.jquery.com/on/ ----- Excess quoted text cut - see Original Post for more -----

Perhaps this is a case of jQuery not recognizing and responding to elements that have been added to the original DOM. If the delete button has been inserted into the original DOM, you'll probably have to use jQuery(document).ready(function() {    $('img.deleteBullet1').live('click', function(event) {   code, code, code...    }); }); so that jQuery will recognize the newly inserted delete button and the reference to it. Just a thought after a quick look over the code... hth, Rick PS - The '.live' function only works after jQuery 1.4 (I think) as part of jQuery. For earlier jQuery version you have to use the live plugin to make this functionality work. Hi Folks - I am having a problem with some code, and I not sure what the heck is happening. I have a web page, in the HEAD it loads in the jQuery code, and then it loads in my particular functions for hopefully editing certain information, but right now, I am just trying to have it display and alert: jQuery(document).ready(function () {    $('img.deleteBullet1').click(function(event){       var val = $(this).attr('myValue');       alert(val);   });    }); Within the Body of my code, I have this function which is designed to post data to a table and on success read a table: function addBullet2(){     var val = $("#bulletText").val();     if( val.length == 0 ){ alert("Please enter text for this bullet."); return false; };     if( val.length > 0 ){        $.post("_inc/act_addBullets.cfm", $("#bulletForm").serialize(),            function(){                     $.ajax({                 type: "GET",           cache: false,           url: '_inc/dsp_allBullets.cfm',           data: "itemid=" + <cfoutput>#attributes.itemid#</cfoutput>,           dataType: "html",           success: function(html){ document.getElementById('bulletText').value = '';           temp = html;           temp = temp.substr(48, ((temp.length)-48));    $("#bulletsprocess").html(temp);             } // This closes the Success         }); // This closes the Ajax process       } // This closes the success function to the Post     ); // This closes the Post function   }; // This closes the If logic } Here's the problem: My addbullet function posts fine and reads the table correctly. If I click on the img that is associated with the delete bullet, it works fine before I post any thing. After I post, the delete bullet click function no longer works. Any ideas?   Thanks, Doug

Hi Ray and Rick - Thank you both for your suggestions... and thank you opening my eyes. It's all about the timing of the DOM and what gets loaded after the fact. Gentlemen - you present 2 options... .on vs .live. Is one better than the other, or is it just 2 sides of the same coin which will produce the same results? Thanks, Doug ----- Excess quoted text cut - see Original Post for more -----

live is not recommended anymore according to the docs. ----- Excess quoted text cut - see Original Post for more -----

As always Ray, thank you very much for the info!! I truly appreciate it! And Rick, thank you for your assistance also! Doug >live is not recommended anymore according to the docs. > > > >>

I would go with Ray's suggestion.  He seems to be more up on the current docs than I.  I'm not even that familiar with ".on", so I need to do some doc reading, as well. I've always used ".live" and it's worked well.  I didn't know it was no longer recommended. Rick live is not recommended anymore according to the docs. ----- Excess quoted text cut - see Original Post for more ----- will produce the same results? > > Thanks, >