jQuery Mobile: dymamically created elements don't have click events

Question

On my jQuery Mobile website I would like to give the user the possibility to add select menus on click. The additional select menus appear, but do not work. No options are shown when the select menus are being clicked.

Here comes my code:

JSFiddle: http://jsfiddle.net/nCs6U/82/

HTML:

<div id="select-con">
    <div class="select-row">
        <form class="select-form">
            <select class="select-class" name="select-name"
                    data-native-menu="false">
                <option value="0" data-placeholder="Choose">Choose</option>
                <option value="1">Option 1</option>
                <option value="2" selected="selected">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </form>
    </div>

    <!-- raw select menu for adding -->
    <div id="select-row-raw" class="select-row">
        <form class="select-form">
            <select class="select-class" name="select-name"
                    data-native-menu="false">
                <option value="0" data-placeholder="Choose">Choose</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </form>
    </div>
</div>

<button>Add Select</button>

JS:

$('button').on('click', function() {
    $clone = $('#select-row-raw').clone();
    $clone.appendTo('#select-con').show();
});

How do I achieve that the added select menus (clones of "#select-row-raw") work?

* UPDATE *

New fiddle: jsfiddle.net/nCs6U/85

The weird thing is that for the first added select menu the display of options still does not work. How can this problem be solved?

Id be unique in HTML You used many times $('#select-row-raw') — Sudharsan S, Jul 08 '15 at 08:56
thank you for your pointing this out to me. are you able to adapt the fiddle so that it works? — Max, Jul 08 '15 at 08:59
I'd have thought its more to do with jquery mobile and the click events not being bound to the newly created dom elements. — Jamie Hutber, Jul 08 '15 at 09:00
http://jsfiddle.net/nCs6U/82/ Here is the problem without the ID's but the click events still aren't bound. — Jamie Hutber, Jul 08 '15 at 09:03
you have posted the exact same fiddle link as is contained in my post — Max, Jul 08 '15 at 09:04
[**.clone()**](https://api.jquery.com/clone/) Normally, any event handlers bound to the original element are not copied to the clone — Nagaraj S, Jul 08 '15 at 09:30
http://stackoverflow.com/questions/26654342/jquery-clone-input-fields-on-click-work-but-select-box-values-cannot-be-change — Nagaraj S, Jul 08 '15 at 09:50

score 1 · Answer 1 · answered Jul 08 '15 at 09:06

1

In your JS try adding to your clone function like so:

$('button').on('click', function() {
    $clone = $('#select-row-raw').clone(true, true);
    $clone.appendTo('#select-con').show();
});

This will clone the event listeners of #select-row-raw and it's children

answered Jul 08 '15 at 09:06

Jonathon Blok

749
4
14

almost perfect. for the first added select menu, the options still are not shown. updated fiddle: http://jsfiddle.net/nCs6U/85/ any idea how to fix this problem? – Max Jul 08 '15 at 09:09
@Max Sorry, I couldn't work this out. Did you solve it in the end? – Jonathon Blok Jul 10 '15 at 11:57

score 0 · Answer 2 · edited May 23 '17 at 12:29

In jQuery.clone() you have to set the event parameters to true as per this ref

$element.clone(true, true);
clone( [withDataAndEvents] [, deepWithDataAndEvents] )

withDataAndEvents: A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false.

deepWithDataAndEvents: A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

plus the suggestion from @jqueryKing, to have unique HTML ID's. So change your code to:-

HTML

<div id="select-con">
    <div class="select-row">
        <form class="select-form">
            <select class="select-class" name="select-name"
                    data-native-menu="false">
                <option value="0" data-placeholder="Choose">Choose</option>
                <option value="1">Option 1</option>
                <option value="2" selected="selected">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </form>
    </div>

    <!-- raw select menu for adding -->
    <div class="select-row">
        <form class="select-form">
            <select class="select-class" name="select-name"
                    data-native-menu="false">
                <option value="0" data-placeholder="Choose">Choose</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </form>
    </div>
</div>
<button>Add Select</button>

JS

$('button').on('click', function() {
    // To avoid duplicate clones, use .first()
    // To enable bindings, pass (true,true) to the clone function
    $clone = $('.select-row').first().clone(true,true); 
    $clone.appendTo('#select-con').show();
});

jQuery Mobile: dymamically created elements don't have click events

2 Answers2