on bind an input field that was generated using a ajax call

Question

I am wanting to bind a input field that is generated into the page using ajax.

I have tried a number of different jQuery codes and none of them give any type of success.

Here are the codes I have used:

$('#bookingcoupon').bind('input', function(){});
$(document).on('bind', '#bookingcoupon', function(){});
$('body').on('bind', '#bookingcoupon', function(){});
$('.divname').on('bind', '#bookingcoupon', function(){});

None of which works

When I use a click listener using:

 $('.divwrapper').on('click', '.clickbutton', function(){});

This works fine, it just does not like the bind version of the on() function.

Any advise would be appriciated :)

You should be using `on()`, so the code you're using is the correct method. `bind()` was deprecated a long time ago and should not be used, and there is no `bind` event. — Rory McCrossan, Oct 09 '18 at 08:03
Yes, as per above comment `on()` should be used. Little correction in below codes:`$(document).on('bind', '#bookingcoupon', function(){}); $('body').on('bind', '#bookingcoupon', function(){}); $('.divname').on('bind', '#bookingcoupon', function(){});`. Here #bookingcoupon will select only first element having id as bookingcoupon, whereas if you used '[id="bookingcoupon"]' then it will select all elements having id as 'bookingcoupon'. — Prasad Wargad, Oct 09 '18 at 08:08
@RoryMcCrossan as you can see, I have been using the on function. It does not work — Robert, Oct 09 '18 at 08:08
Your question literally says 'This works fine'...? Are you saying it's not working? If so, we need to see a complete example of the problem, including the HTML, and a much more clear description of what you're expecting to happen — Rory McCrossan, Oct 09 '18 at 08:10
@PrasadWargad I have tried the on() function and my first thought was on but then I tried bind because I could not get on to work. I used only the id name because there is only 1 element that is generated with that ID else I would have done the input[id=idname] :) — Robert, Oct 09 '18 at 08:10
@RoryMcCrossan it says None of which works. The only thing that works is the on('click') which I said at the end with the caption, only the bind version of the on() does not work. Sorry Miss said the bind function rather than bind version of the on() — Robert, Oct 09 '18 at 08:12
Read your second from last line. It says using `on()` works, which is correct. The reason none of your previous methods work is because they're invalid. As I said in my previous comment, `bind()` is deprecated and there is no `bind` event. — Rory McCrossan, Oct 09 '18 at 08:13
@RoryMcCrossan Yes, mis-spelt which I replied in last comment. Sorry — Robert, Oct 09 '18 at 08:14
@RoryMcCrossan there is no on('bind'); any longer? not what the on() function says in the jQuery documents page: http://api.jquery.com/on/ — Robert, Oct 09 '18 at 08:15
@RoryMcCrossan if the bind has been removed, how do you bind in jQuery now? — Robert, Oct 09 '18 at 08:17
Using `on()`... this why I'm so confused as to what your problem is, given that what you've shown works., — Rory McCrossan, Oct 09 '18 at 08:20
@RoryMcCrossan $(document).on('bind', '#bookingcoupon', function(){}); doesnt work, only the on('click') works and not the on('bind') — Robert, Oct 09 '18 at 08:20
There never was an `on('bind')` and the documentation clearly make no mention of it. I think you're confusing yourself here. — Rory McCrossan, Oct 09 '18 at 08:20
AGAIN, THERE IS NO `on('bind')`. `bind` is not an event. Use an actual event name like the documentation, that you yourself linked to, explains. — Rory McCrossan, Oct 09 '18 at 08:21
@RoryMcCrossan then I asked what do you use instead of bind, and you said your confused because I said it works — Robert, Oct 09 '18 at 08:22
No I said to use `on()`, with an actual recognised event, as you are in the question, and as the documentation explains. — Rory McCrossan, Oct 09 '18 at 08:22
@RoryMcCrossan sorry, so confusing typing instead of talking lol... So basically the whole BIND has been removed, so do I need to use something like keypress, focus or something within them lines? — Robert, Oct 09 '18 at 08:24

score 0 · Answer 1 · answered Oct 09 '18 at 08:36

I made this example, maybe it can help you:

http://jsfiddle.net/xpvt214o/873462/

// find elements
var button = $("button")

// handle click and add class
button.on("click", function(){
  $("#append").append( "<input class='sameClass' type='text'></input></br>" );

  $('.sameClass').change(function(){
    $('.sameClass').bind('change',functionChange(this));
  });

});

function functionChange(obj){
    alert($(obj).val());
};

And the HTML:

<div id="banner-message">
  <button >Add TextBox</button>
  <div id="append">
  </div>
</div>

on bind an input field that was generated using a ajax call

1 Answers1