3

jqueryイベントを起動して要素pまたはspanをテキストフィールドに置き換え、onblurイベントをpまたはspanフィールドに置き換えているときに小さな問題に直面しています。

デモはこちら http://jsfiddle.net/yXcZG/

p テキストをクリックすると、最初はうまくいきますが、同じプロセスを 2 回目に繰り返すと失敗します。

問題がどこにあるのか、誰でも助けてくれますか

4

5 に答える 5

3

jQueries .on selecorは、動的コンテンツ（ajaxや実行していることなど）にアタッチするために使用されます。通常は使用するだけですが$('.myClass').click(funcction(){}); 、静的クラスを使用する$('.cmtedit').on(...と、そのクラスをクリックして削除されるため、問題が発生します。作成した参照には存在しなくなります。したがって、.on適切に使用するにはdocument、動的コンテンツにいつでも再接続できるように、接続する必要があります。:-)

.on（events [、selector] [、data]、handler（eventObject））

$(document).on('click', '.cmtedit', function (e) {
    console.log(this);
   TBox(this);
});

ここでうまく機能します。

http://jsfiddle.net/yXcZG/3/

console.log();ChromeまたはFirefoxを使用していない場合も、削除することを忘れないでください。IEではまったくサポートされていません！

于 2012-04-15T09:55:57.347 に答える
0

RBox（）関数で作成された新しい<p>にクリックイベントをアタッチしていません。次のコードが機能します:(ここにあるかどうかをテストします：http：//jsfiddle.net/yXcZG/5/）

$(".cmtedit").on('click', function (e) {
   TBox(this);
});

$("input").live('blur', function (e) {
   RBox(this);
});
function TBox(obj) {
        var id = $(obj).attr("id");

        var tid = id.replace("cmt_edit_", "cmt_tedit_");
        var input = $('<input />', { 'type': 'text', 'name': 'n' + tid, 'id': tid, 'class': 'text_box', 'value': $(obj).html() });
        $(obj).parent().append(input);
        $(obj).remove();
        input.focus();
}
function RBox(obj) {
    var id = $(obj).attr("id");

    var tid = id.replace("cmt_tedit_", "cmt_edit_");
    var input = $('<p />', { 'id': tid, 'class': 'cmtedit', 'html': $(obj).val() });
    $(obj).parent().append(input);
    $(obj).remove();

    $(".cmtedit").on('click', function (e) {
     TBox(this);
   });
}​
于 2012-04-15T09:57:15.107 に答える
0

もし私があなただったら、それをリファクタリングし（ライブは高価です）、次のように書きます：

<style>
    ​#cmt_edit_323 input { display: none; }​
</style>

<div id="sample">
     <p id="cmt_edit_323" class="cmtedit"><span>Sample Text</span><input type="text"></input>    </p>
</div>​​​​​

<script>
$(".cmtedit").on('click', function (e) {
   TBox(this);
});

$(".cmtedit input").on('blur', function (e) {
   RBox(this);
});

function TBox(obj) {
        var input = $(obj).find("input");
        var span = $(obj).find("span");
        input.attr('value', span.text()).show().focus();
        span.hide();            

}
function RBox(obj) {
        var input = $(obj);
        var span = $(obj).parent().find("span");
        span.html(input.attr('value')).show();
        input.hide();
}​
</script>

ここで確認してください：JSFiddle

于 2012-04-15T10:11:14.057 に答える
0

あなたがそうしてobjを削除していると思います

 $(obj).remove();

TBox関数で

したがって、RBox関数を再度作成するときに、クリックイベントハンドラーを追加する必要があります

またはさらに良い

使用することをお勧めします

$(".cmtedit").live('click', function (e) {

それ以外の

$(".cmtedit").on('click', function (e) {

参考までに http://api.jquery.com/live/

于 2012-04-15T09:52:46.393 に答える