0

私はこのようなレシピアプリケーションを持っています：http： //i.stack.imgur.com/FxL7R.png

成分スパンの最後には削除ボタンがあります。何らかの理由で、私のコードが機能していません（つまり、成分スパンが削除されていません）：

HTML：

        <div class='formelementcontainer funky'>
        <label for="ingredient">Ingredients</label>
        <div id='ingredientsCOUNT' class='sortable'>
            <span>
                <input type="text" class='small' name="ingredient" id="ingredient" placeholder='QTY'/>
                <select name='measurements'>
                    <option value='' name='' checked='checked'>--</option>
                    <?foreach ($measurements as $m):?>
                        <option value='<?=$m->id;?>'><?=$m->measurement;?></option>
                    <?endforeach;?>
                </select>
                <input type="text" name="ingredient" id="ingredient" placeholder='Ingredient'/>
                <a class='float-right delete-button' id='deleteThis' style='margin:10px 2px;' href='#'><img src='<? echo base_url()."public/img/delete.png";?>' height='11' width='11' /></a>
            </span>
        </div>
        <div class="clear"></div>
        <div class='addSPAN tabover'>
            <a class='float-right' id='btnAddIngredients' href='#'>Add Ingredient</a>
        </div>
        </div>

JQUERY：

(function($) { 
$(document).ready(function () {
    $('#btnAddIngredients').click(function () {
        var num = $('#ingredientsCOUNT span').length;
        var newNum = new Number(num + 1);
        $('#ingredientsCOUNT > span:first')
            .clone()
            .attr('name', 'ingredient' + newNum)
            .appendTo('#ingredientsCOUNT')
            .fadeIn();
    });
    $('#deleteThis').click(function () {
        var span = $(this).closest('span');
        span.fadeOut('slow', function() { span.remove(); });
    });
});
})(jQuery);

Xをクリックすると、最も近いスパン（含まれているスパン）が削除されます。しかし、それをクリックしても何も起こりません。助言がありますか？すべての助けをありがとう！

編集

これがJSFIDDLEです：http：//jsfiddle.net/sjDk7/1/

4

1 に答える 1

4

ここでの問題は、ドキュメントにまだ含まれていない要素にイベントハンドラーをアタッチしていることです。最も簡単な解決策は、次を使用してイベント処理を祖先要素に委任することonです。

$('.formelementcontainer').on('click', '.deleteThis', function () {
    var span = $(this).closest('span');
    console.log(span);
    span.fadeOut('slow', function () {
        span.remove();
    });
});

ここでデモを見ることができます。

于 2013-03-25T22:59:08.110 に答える