0

I found a few posts on the topic, but none of them worked for me. The only thing I found that seemed like it would help was this:

$._data($("#qRemBtnX"), "events");

, where qRemBtnX is the ID of the remove button for question X. But this just returned undefined for any of the buttons, even before I removed any.

I have a form that allows for input fields to be added and removed. Each input field is wrapped in a div that also contains a button to remove that question. Each div has a unique ID and each removal button also has a unique ID.

When I remove a question, I need the fields following that one to replace each preceding input. So if I have, say 4 input fields wrapped in a div with a button, and these buttons are #btn1, #btn2, #btn3, #btn4, and I remove the div containing #btn, I need to rename #btn3 to #btn2, and #btn4 to #btn3, as well as transfer the event listeners for them.

I expected this to rebind existing click listeners with the new buttons since the click listeners were added by using an ID selector. That wasn't the case however. So is there any way that I can just take an existing event listener and rebind it once I update the ID's of the buttons?

Blake F.
  • 153
  • 13
  • 5
    Hi, Can you please add some code you have tried so far? – Anand G Nov 13 '18 at 21:32
  • It sounds like you have your buttons and container divs hard-coded to match on IDs - is this correct? I can't see another case why you'd have to ever re-ID an element. If so, it would be much better to simply have one event listener (perhaps on a shared class of all the buttons), and just say "Remove the parent div of whichever button was clicked". – Tyler Roper Nov 13 '18 at 21:35
  • No doubt you did something like `$("#btn4").click(function() { $("#wrapper4").remove(); }`. Instead use node traversal, such as $(".delbutton").click(function() { $(this).closest(".wrapper").remove(); }` then it doesn't matter if you re-id them. – freedomn-m Nov 13 '18 at 21:39
  • @AnandGhaywankar I have added something I've tried to the top of the post. – Blake F. Nov 13 '18 at 21:40
  • Have a read of this, it will likely give you ideas for an alternative way to handle this (via event delegation) https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – freedomn-m Nov 13 '18 at 21:40
  • Worth noting: when you add an event handler like `$("#btn4").click(...` it only affects elements that exist *at that time*. If you rename #btn5 to #btn4 then it wasn't the #btn4 that was there at the time the event binding was initiated. This is why you use event delegation: `$(document).on("click", "#btn4", function() ...` then it will (may, never done this with IDs, only other selectors) handle when you change the ID. – freedomn-m Nov 13 '18 at 21:42
  • 1
    Also: sounds like an XY problem. Is there a reason that you need to re-ID that can't be solved another way? (eg by "logically" deleting the row without actually removing it) – freedomn-m Nov 13 '18 at 21:43
  • Why don't you just set a css class for each input element, and then collect all the data with document.getElementsByClassName instead of renaming and reassigning listeners? – Michał Dąbrowski Nov 13 '18 at 21:45
  • 1
    @MichałDąbrowski that is the question. One reason could be MVC(C#)/Razor default array model binder requires concurrent numbers, but so far there's no indication of *why* OP is re-IDing and that the key to the solution. – freedomn-m Nov 13 '18 at 22:18
  • @freedomn-m I'm certain there is a better way to do what I'm doing, as I'm about a week in to learning JavaScript and DOM manipulation, so I'm not really sure what I'm doing. The remove button is created after a button to add the field is pressed, so I have the creation of the event listener within the event listener of that add button. I suppose that you do have a point about the need to re-ID the button though. Perhaps I should go the class method that Michal has suggested. – Blake F. Nov 14 '18 at 01:15
  • @MichałDąbrowski that's a very good idea, I think I will try that out. I don't believe there really is any need to re-ID. I just didn't think of using classes for some reason. I'm only about a week in to using JavaScript/jQuery/HTML/CSS, so I appreciate the help. – Blake F. Nov 14 '18 at 01:19
  • You could also simply hide the outer div. Always worth considering if there's an alternative/easier option when you get stuck on something. – freedomn-m Nov 14 '18 at 08:08

0 Answers0