inline onclick event not working on ajax response
I have this html which works if it is in the page when it loads:
<input type="checkbox" name="originBusDock" value="Y" />
<label for="originBusDock" onclick="document.booking.originBusDock.checked=(!document.booking.originBusDock.checked);">Loading Dock</label>
If I click on the label, the checkbox next to it checks, and if I click again, it unchecks.
My problem is if I populate an empty div with response data from an AJAX call with this same code, the onclick event is not working. It appears I have to "rebind to the DOM"?? from what I could find, but how to do it? The amount of checkboxes is variable and they all have different names. There are also other checkboxes in the page from the original page load that I dont want to affect. I have seen this: onclick event on Ajax output but it uses a f开发者_如何转开发ixed ID and I wont know in advance what the ID names will be as it is generated dynamically on the AJAX call. Hope that makes sense. TIA
Labels attach to other elements based on the id
attribute, not the name
, so if you make sure your inputs have an id
as follows:
<input type="checkbox" id="originBusDock" name="originBusDock" value="Y" />
<label for="originBusDock">Loading Dock</label>
...then you shouldn't need the onclick
event at all - clicking the label will automatically toggle the associated checkbox.
精彩评论