1

ここでは backbone.js ' click' イベントを使用しました。onClick イベントで、クリックされた HTML 要素を選択し、削除して追加リストに追加したい。

クリックしたすべての HTML dom 要素にアクセスできません。HTML要素を取得した後。

「中国」をクリックすると、以下のコードは「<li>China</li>」を警告します。

では、すべての dom プロパティにアクセスするにはどうすればよいですか?

Java スクリプト コード:

var ActionBox = Backbone.View.extend({
        el:$("#container"),
        events: {
                    "click #add li": "addItem",
                    "click #alert": "alertHere"
        },
        initialize: function(){     
                _.bindAll(this,"addItem","render");             
                this.render();  
        },
        render:function(){  
                this.prepareActions();          
        },
        addItem:function(ev){
                var ac=$(ev.target).html(); // it doesn't give me "<li>US</li>" after clicking US
                alert(ac);
                },
        prepareActions:function(){          
                    var str="";
                    for(var i=0;i<actions.length;i++)   str+="<li>"+actions[i]+"</li>";                         
                    $("#add ul").append(str);
        }       
    });    
var actionBox = new ActionBox();

および HTML コードは次のとおりです。

    <div id="container">
    <table>
    <tr>
        <td>
            <div id="add">      
                <ul>
                 <li>US</li>
                 <li>China</li>
                 <li>UK</li>
                </ul>
            </div>
        </td>
        <td>
            <div id="controls">

            </div>
        </td>
        <td>
            <div id="added">        
                <ul></ul>
            </div>
        </td>
    </tr>
    </table>        
</div>

add と added の 2 つの ul コンテナーがあります。ソースから要素をクリックすると、ターゲット コンテナーに移動する必要があります。

4

2 に答える 2

6

appendTo を使用したいだけです-これはそれを削除し、#added UL に入れます

$(ev.target).appendTo('#added');
于 2012-02-17T15:06:16.457 に答える
0

Backbone 0.9.1 で自分で実行してみましたが、すべてうまくいきました。含まれていることを確認してください

var ActionBox = Backbone.View.extend({
    el:$("#container"),
    ...      
});

HTML がレンダリングされた後。それ以外の場合は、$("#container")実際に DOM に存在する前に指定しています。これを行うと、jQuery は何も返さないためel、空の配列に設定されるため、イベントは何もバインドされなくなります...したがって、呼び出されることはありません。

これが機能するjsFiddleです：http://jsfiddle.net/8jyeb/1/。すべての JavaScript を jQuery DOM Ready ハンドラーでラップする必要があることに注意してください。これにより、HTML が読み込まれるまでコードが実行されなくなります。

于 2012-02-17T15:02:55.370 に答える