0

ユーザーが必要とするときはいつでも他の入力をフォームに追加したい..しかし、レンジスライダー(jQrangeslider)を使用していて、他の入力が表示されたときにそれを呼び出したい..

  • jQrangesliderを呼び出すかどうかは問題の原因ではないと思います..しかし、HTMLで使用する完全なコードを示します。

    温度: ジュール 
        <input type="text" name="jour1" />
</div>
<div class="span3"> <span class="top">Matin</span>

    <div id="temp-g-1-"></div>
</div>
<div class="span3"> <span class="top">Soir</span>

    <div id="temp-d-1-"></div>
</div>

そしてJS：

$(document).ready(function () {
var jour = 1;
$('input[name^="jour"]').on("blur", function () {
    alert('called');
    jour = jour++;
    $(this).closest('div[id^="jour"]').after('<br><div class="span3"></div><div id="jour' + jour + '"><div class="span3"><span class="top">Jour</span><input type="text" name="jour' + jour + '"/></div><div class="span3"><span class="top">Matin</span><div id="temp-g-' + jour + '-"></div></div><div class="span3"><span class="top">Soir</span><div id="temp-d-' + ++jour + '-"></div></div>');
    $('div[id^="temp-g-"]').editRangeSlider({
        valueLabels: "change",
        durationIn: 1000,
        durationOut: 1000,
        type: "number",
        bounds: {
            min: 8,
            max: 12
        },
        defaultValues: {
            min: 8,
            max: 12
        }
    });
    $('div[id^="temp-d-"]').editRangeSlider({
        valueLabels: "change",
        durationIn: 1000,
        durationOut: 1000,
        type: "number",
        bounds: {
            min: 14,
            max: 18
        },
        defaultValues: {
            min: 14,
            max: 18
        }
    });
});

});

jsfiddle の例 (jQrangeslider なし): http://jsfiddle.net/p4LWf/5/

4

1 に答える 1

1

追加した要素は、バインド時に存在しないため、クリック イベントにバインドされません。event delegation代わりに次を使用する必要があります。

$('.row-form').on("blur",'input[name^="jour"]', function () {
//code 
}

onおよびhttp://api.jquery.com/on/の詳細event delegation

于 2013-03-31T16:25:28.090 に答える