9

だから私は次の構造のページを持っています

<div class="editCampaignBanner">
    <div>
    <hr>
    <label for="file">Upload a new image</label>
    <input id="file" type="file" name="file" class="valid">
    <label for="NewImageURLs">Link URL (Optional)</label>
    <input id="NewImageURLs" type="text" value="" name="NewImageURLs">
    <hr>
    </div>
</div>

そして私はこうしていくつかのjqueryを書きました：

$('div.editCampaignBanner input:file').on('change', function () {
        var value = $(this).val();
        var div = $(this).parent();
        var html = '<div>'+ div.html() + '</div>';
        if (value.length > 0) {
            div.after(html);
        }
        else if ($(this) > 1) {
            div.remove();
        }
    });

したがって、ファイルに要素を入力すると、前の要素の下にdivが生成されます。

    <div class="editCampaignBanner">
        <div>
        <hr>
        <label for="file">Upload a new image</label>
        <input id="file" type="file" name="file" class="valid">
        <label for="NewImageURLs">Link URL (Optional)</label>
        <input id="NewImageURLs" type="text" value="" name="NewImageURLs">
        <hr>
        </div>
        <div>
        <hr>
        <label for="file">Upload a new image</label>
        <input id="file" type="file" name="file" class="valid">
        <label for="NewImageURLs">Link URL (Optional)</label>
        <input id="NewImageURLs" type="text" value="" name="NewImageURLs">
        <hr>
        </div>
    </div>

しかし今で.on()は、divに入力された2番目のファイルを使用してイベントが登録されているにもかかわらず、イベントは発生しません。私は何が欠けていますか？

4

4 に答える 4

13

交換

$('div.editCampaignBanner input:file').on('change', function () {

に

$('div.editCampaignBanner').on('change', 'input:file', function () {
于 2012-10-18T08:26:59.897 に答える
4 
$(document).delegate("div.editCampaignBanner input:file", "change", function() {
  //code goes here
});


$(document).on('change', 'div.editCampaignBanner input:file', function () {
 //code goes here
});

ルート要素の特定のセットに基づいて、現在または将来、セレクターに一致するすべての要素の 1 つ以上のイベントにハンドラーをアタッチします。jQuery 1.7 の時点で、.delegate() は .on() メソッドに取って代わられました。ただし、以前のバージョンでは、イベント委任を使用する最も効果的な手段であり続けています。イベントバインディングと委譲の詳細については、.on() メソッドを参照してください。

jQuery .bind() と .live() と .delegate() と .on() の違い

于 2012-10-18T08:30:31.190 に答える
1

これを試して：

$('div.editCampaignBanner').on('change','input:file', function () {
        var value = $(this).val();
        var div = $(this).parent();
        var html = '<div>'+ div.html() + '</div>';
        if (value.length > 0) {
            div.after(html);
        }
        else if ($(this) > 1) {
            div.remove();
        }
    });
于 2012-10-18T08:28:12.267 に答える
0

$.live()jqueryメソッドを使用することもできますが、非推奨ですが、私にとってはうまくいきます：

$('div.editCampaignBanner input:file').live('change', function () {
        var value = $(this).val();
        var div = $(this).parent();
        var html = '<div>'+ div.html() + '</div>';
        if (value.length > 0) {
            div.after(html);
        }
        else if ($(this) > 1) {
            div.remove();
        }
    });

詳細: http://api.jquery.com/live/

.on()最新の ( ) を使用することに気が進まない場合は、次のように使用します。

function fileChanged(ele){
    var value = ele.val();
    var div = ele.parent();
    var html = '<div>'+ div.html() + '</div>';
    if (value.length > 0) {
        div.after(html);
    }
    else if (ele > 1) {
        div.remove();
    }
    $('div.editCampaignBanner').unbind().on('change','input:file', function () {
        fileChanged($(this))
    });
}
$(function(){
    $('div.editCampaignBanner').on('change','input:file', function () {
        fileChanged($(this))
    });
});
于 2012-10-18T08:30:40.750 に答える