0

I have created a toolbar for basic database actions: insert, delete etc. It has an onclick event that is handled ok. I would like to be able to dynamically build this toolbar by php. The same code is generated but for some reason the event is not working. I tried firefox developer edition to find out, but it shows me that the original code is bound to events, but the ajax received part isn't. What am I doing wrong

top version is working, the full (green) toolbar isn't (not bound to ev) this part was received by an ajax event

the original html looks like this:

<div class="btn-group" role="group" aria-label="hallo">
 <button type="button" id="id_phspapps_dbnavigator_1_add" class="btn btn-default">Add</button>
 <button type="button" id="id_phspapps_dbnavigator_1_cancel" class="btn btn-default">Cancel</button>
 </div>
 </div>
 <div id="phid_phspapps_dbnavigator_1">
 </div>

In the ondocumentready an event is triggered to retrieve the toolbar data. It looks like the setup ajax event is not bound to the fields. All buttons have their own event, like _add, _cancel as the function below for _edit:

$("#id_phspusers_dbnavigator_1_edit").click(function() {
  var str='';
   str = $( "#id_"+formid ).serialize();
  procbutton(str+'&cmd=edit&sender=id_phspusers_dbnavigator_1','');
});

enter image description here

ai dee
  • 47
  • 7
  • 1
    How would we know what you're doing wrong if you're not showing what you're doing. Don't post screenshot but actual code. – Loïc Faure-Lacroix Dec 26 '17 at 20:46
  • 1
    If you don't post code it's impossible to tell what you're doing wrong. But as a guess, see https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar Dec 26 '17 at 20:46
  • Sorry, i have a screenshot as Firefox doesn't allow me to cut and paste – ai dee Dec 26 '17 at 20:50
  • @aducom-albertdrent StackExchange sites use Markdown for formatting question/answer not bbcode, posting in [code][/code] will not work. Also HTML isn't enough. – Loïc Faure-Lacroix Dec 26 '17 at 20:52
  • @aducom-albertdrent We need to see the actual **JavaScript** code of what you are doing. – Herohtar Dec 26 '17 at 20:53
  • Sorry you are all faster than I could make my question more clear and add additional data. Sorry for that. – ai dee Dec 26 '17 at 20:56
  • Looks like a problem in your selector. You're not binding to "id_phspapps_dbnavigator_1_add" or "id_phspapps_dbnavigator_1_cancel" also formid is undefined. – Jonathan Chaplin Dec 26 '17 at 21:01
  • add and cancel are working, the formid is defined elsewhere. The issue is the next block for the green buttons. phid_phspapps_dbnavigator_1 has been used as the selector to insert the code which is shown by firefox. The gray buttons work ok (and marked by ev in firefox). the green buttons don't work. – ai dee Dec 26 '17 at 21:05

1 Answers1

5

If you are generating things dynamically you need to use .on()

$(document).on( "click" ,"your_element", function() {

});

I'm not sure but i believe that the document is like the most outer parent(your file) you don't necessarily need to bind the event to the document. You need to bind it to a parent element that exists when the page and the JS script loads(as far as i know), check the link provided by @JasonB for the docs regarding this for a much better explication.

SomeBeginner
  • 49
  • 1
  • 3
  • 17
  • 2
    .on() can be used without the selector parameter being specified. In your example you correctly specify your_element. Since this part is easy to overlook, can you beef up your answer with a little bit of an explanation of why this needs event delegation https://learn.jquery.com/events/event-delegation/? – JasonB Dec 26 '17 at 21:12
  • ::somebeginner: Thank you so much! Where is this documented? Btw, there needs to be a comma before function(). ::JasonB, not sure if this question is meant for me? The resulting javascript procedure that is working now looks like: $(document).on( "click",'#id_phspusers_dbnavigator_1_edit', function() { var str=''; str = $( "#id_"+formid ).serialize(); procbutton(str+'&cmd=edit&sender=id_phspusers_dbnavigator_1',''); }); – ai dee Dec 26 '17 at 21:18
  • Well not necessarily, you can bind the events directly after the new HTML has been inserted. –  Dec 26 '17 at 21:22