7

私は Web アプリを開発しています。ユーザーが内部をクリックするたびに、textそれがspan必要になり、再度スパンする必要があるという要件があります。だから私は私のjspページの1つで次のスクリプトを使用しています。convertinput fieldon blurconvert it back

Java スクリプト:

<script type="text/javascript">
function covertSpan(id){

    $('#'+id).click(function() {
        var input = $("<input>", { val: $(this).text(),
                                   type: "text" });
        $(this).replaceWith(input);
        input.select();   
    }); 

      $('input').live('blur', function () {
            var span=$("<span>", {text:$(this).val()});
            $(this).replaceWith(span);

      });         
}

JSP コード:

<span id="loadNumId" onmouseover="javascript:covertSpan(this.id);">5566</span>

今私の問題は、すべてが初めてうまくいくことです。つまり、スパン内のテキストをクリックすると、first time入力フィールドに変換されonblur、入力フィールドから通常のテキストに再び変換されます。しかし、もう一度やり直そうとしても、うまくいきません。上記のスクリプトの何が問題になっていますか?

4

5 に答える 5

1

まず、クリック ハンドラーも使用するように変更する必要がありますlive()。live()ただし、これはかなり前から廃止されていることに注意してください。on()代わりに両方のケースで使用する必要があります。

次に、入力をスパンに置き換える場合、要素に ID を与えません。したがって、要素はクリック ハンドラのセレクタと一致しなくなります。

個人的には、完全に別の (そしてより単純な) アプローチをとります。スパンと入力の両方をマークアップに並べて配置します。1 つは非表示になり、もう 1 つは表示されます。これにより、DOM 要素を再作成しようとするときに間違いを犯す可能性が少なくなり、DOM から要素を常に追加/削除することがなくなるため、パフォーマンスが向上します。

于 2013-05-04T12:06:40.457 に答える
1

要素の置換が良いことだとお考えのことは承知していますが、プロンプトを使用してテキストを取得します。なんで？それははるかに簡単で、実際にはユーザーにとっても少しきれいです. やり方が気になる方はお見せします。

html:

<span class='editable'>foobar</span>

js:

$(function()
{
  $('span.editable').click(function()
  {
    var span = $(this);
    var text = span.text();

    var new_text = prompt("Change value", text);

    if (new_text != null)
      span.text(new_text);
  });
});

http://jsfiddle.net/qJxhV/1/

于 2013-05-04T12:20:27.567 に答える