0

I am using the jQuery Chosen plugin and am able to add new options dynamically

$('#element').chosen({
    create_option: true,
    // persistent_create_option decides if you can add any term, even if part
    // of the term is also found, or only unique, not overlapping terms
    persistent_create_option: true,
    // with the skip_no_results option you can disable the 'No results match..' 
    // message, which is somewhat redundant when option adding is enabled
    skip_no_results: true,
    create_option_text: 'Add option'
});

What I need is a way to update a hidden field ONLY IF the Add option link is clicked.

After inspecting the code in Chrome, I can see tthe following html added:

<li class="create-option active-result"><a>Add option</a>: "dsgdsgsdgdg"</li>

I've tried targeting those classes with a click event but it doesn't work

$('.create-option.active-result').click(function() {
    alert('fsgsdgdsgd');
});

Is there a way to target this link or check to see if the select list has changed in length?

aynber
  • 22,380
  • 8
  • 50
  • 63
Peter Griffin
  • 300
  • 5
  • 18
  • Are the elements load with the DOM or added dynamically later on? – flx Jan 23 '18 at 12:13
  • There iis an input box and if the value you type in isn't in the original select, it gives the option to add to the list so it appends an option to the select – Peter Griffin Jan 23 '18 at 12:21
  • That explains the problem. When you bind a event on dynamic elements you have to do it a different way. – flx Jan 23 '18 at 12:24

1 Answers1

0

You want to bind events to a dynamically added element.

See this question: Event binding on dynamically created elements?

As statet there you have to call:

$("#myList").on("click", ".create-option.active-result", function() {
    alert(this.text);
});
flx
  • 1,560
  • 13
  • 22
  • @PeterGriffin okay then. please provide a working fiddle or code-snippet then. otherwise its not possible to help you. – flx Jan 23 '18 at 13:01