Clever Geek Handbook

JQuery Mobile: no click events on dynamically created elements

On my jQuery Mobile website, I would like to give the user the ability to add selected menus on click. Additional selection menus appear but do not work. No options are displayed when you select items from the selection menu.

Here is 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 added select menus (clones from "# select-row-raw")?

* UPDATE *

New fiddle: jsfiddle.net/nCs6U/85

The weird thing is that for the first selection menu added, the options display still doesn't work. How to solve this problem?

+3


source to share


2 answers


In your JS, try adding to your clone function like this:

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


This will clone the # select-row-raw event listeners and its children

+1


source


In jQuery.clone () you must set event parameters to true according to this ref

$element.clone(true, true);

clone ([withDataAndEvents] [, deepWithDataAndEvents])

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

deepWithDataAndEvents : A Boolean value indicating whether to copy event handlers and data for all children of the cloned element. From by default, its value matches the first argument (defaults to false).

plus @jqueryKing's suggestion to have unique HTML IDs. 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();
});
0


source






More articles:


All Articles