Add click event on dynamically created select

Question

I made this example code: https://jsfiddle.net/gwpcfp89/

The question is about this click event:

var wrapper = $(".select-editable"); // Fields wrapper

$(wrapper).on('keypress', '#input1', function () {
  var cs = $(this).val().length+1;
  console.log( "total caracters:" + cs);
  $('#mytext1').html('<option value="dummy01">dummy01</option><option value="dummy02">dummy02</option><option value="dummy03">dummy03</option>')
});

I use #input1, #mytext1, and I want the click to be dynamic. For example: if I create four selects in the table, the fourth select should have the click event like the first select (#input4 and #mytext4).

Is it possible?

score -1 · Answer 1 · answered Jun 19 '17 at 13:32

I have modified you JSFiddle code - https://jsfiddle.net/pjf17exa/
As per your code, i have fixed some error and modified you code to make it dynamic input action.

// your code
var wrapper = $(".select-editable"); //Fields wrapper

$(wrapper).on('keypress', '#input1', function () {
var cs = $(this).val().length+1;
  console.log( "total caracters:" + cs);
  $('#mytext1').html('<option value="dummy01">dummy01</option><option 
  value="dummy02">dummy02</option><option 
  value="dummy03">dummy03</option>')
});

-- which assigns event for the current row, not for the dynamic elements. So instead take parent element and assign event for the input. Where you can access current element using $(this) instance inside the function. 

// do like this
var wrapper = $("#table-editable");
wrapper.on('keypress', 'input', function () {
  var cs = $(this).val().length+1;
  console.log( "total caracters:" + cs, $(this));
   $(this).prev().html('<option value="dummy01">dummy01</option><option value="dummy02">dummy02</option><option value="dummy03">dummy03</option>')
});

That's great!! Thank you very much. – occiso Jun 19 '17 at 18:31 — occiso, Jun 19 '17 at 18:31

score -1 · Answer 2 · answered Jun 19 '17 at 13:33

-1

You can do a trick here.

when you create dynamic select tags, put one attribute to them like : data-bind="<values>"

so here should be your dynamic numbers which you are appending to id to make input4

and then write a jquery function like give here:

$('select').click(function(){
    var clicked_select = $(this).attr('data-bind');
    // clicked_select will be the number which dynamic element you have clicked. You can use that number with id to access that particular element as a new selector.
});

This should be your solution.

answered Jun 19 '17 at 13:33

Himanshu Upadhyay

6,220
1
13
32

Is a good idea, and not only for this cases. Thanks – occiso Jun 20 '17 at 06:31
@occiso didn't you upvote the answer ? – Himanshu Upadhyay Jun 20 '17 at 17:41

WizardCoder · Answer 3 · 2017-06-19T15:39:47.817

There is a few issues with your code:

The string you were assigning to data+= had some of the HTML attributes using double quotes rather than single quotes, so it was causing the code to break.
You were dynamically creating input fields with the same ID. An ID attribute should always be unique on a page. To fix this I have used the i+1variable to append a unique number to the input ID. Now that the ID is unique I have to changed your $("#students").on('keypress', '#input1', function () { to $("#students").on('keypress', 'input', function () { so it selects the element by it's tag name.
This $(wrapper).on('keypress', 'input', function () { was using .select-editable as the event handler, but the .select-editable was being dynamically generated. The event handler must be an element that wraps around all the elements that are going to be dynamically generated, and not part of a dynamically generated element. So I changed that part of the code to use #students instead.

I hope this helps explain what the issues were.

https://jsfiddle.net/gwpcfp89/6/

it's true, I performed several tests And I broke the code. Thanks. — occiso, Jun 19 '17 at 18:30

Add click event on dynamically created select

3 Answers3