イベントとif/elseステートメントとフォームを含むjQueryロジック

これは経験豊かな開発者にとってはおそらく明らかですが、私は自分自身でjQueryを教えようとしています。 id 'btn'のボタンがあり、HTMLが 'メッセージ1'です。ボタンをクリックすると、HTMLを「メッセージ2」に変更したいとします。これは私がそれをやろうとした方法です、そして、それは動作します。しかし、ボタンがフォームの一部である場合、この方法は機能しません。ボタンがフォームの一部であるときにそれを行う方法はありますか？ここでイベントとif/elseステートメントとフォームを含むjQueryロジック

(function($) { 
    var test = true; 
    $('#btn').on('click',function() { 
     if(test == true) { 
      test = false; 
      $(this).html('Msg 2'); 
     } else { 
      test = true; 
      $(this).html('Msg 1'); 
     } 
    } 
})(jQuery);

出典

2012-04-27 Benjamin Thvedt

$(this).text()のフォームのHTMLを使用する必要があります。 – Blender

フォームの一部である必要がある場合 – superhero

「フォームの一部」とは、またはまだの意味ですか？ – MALfunction84

はあなたが尋ねないいくつかのJSFiddleコード、次のとおりです。

http://jsfiddle.net/RSVdw/1/

がs '）（.valするS'）（.htmlのを変更し、e.preventDefaultを追加しました（）を押すとフォーム全体が更新されないようにします。

HTMLコード：

<html> 
<head></head> 
<body> 
    <form> 
     Press me &gt;&gt; <input type="submit" id="btn" value="Msg 1"/> 
    </form> 
</body> 
</html>

JSコード：

(function($) { 
    var test = true; 
    $('#btn').on('click',function(e) { 
     e.preventDefault(); 
     if(test == true) { 
      test = false; 
      $(this).val('Msg 2'); 
     } else { 
      test = true; 
      $(this).val('Msg 1'); 
     } 
    }); 
})(jQuery);

出典

2012-04-27 04:22:52

ニース。答えをありがとう！ –

私は正しくあなたの質問を理解していなかったが、あなたはこれを試すことができます。

$('#btn').live('click', function(event) 
    { 

     $(this).val('Msg 2'); 
    });

出典

2012-04-27 04:24:09

上記の解決方法は正しいですが、ボタンが動的に作成されない限り、 'on'または廃止された 'live'を使用する必要はありません。

$('#btn').click(function(e) { 
    e.preventDefault(); //.. prevent the button from submitting the form 
    test = !test; 
    $(this).text(test ? 'msg 1' : 'msg 2'); //.. no need to use .html if you're just switching text 
});

注：このソリューションは、あなたが<input type='submit|button'>を使用している場合は、<button>を使用していると仮定しているは、あなたが$(this).val()代わりにポスト

出典

2012-04-27 04:48:06 rkw

イベントとif/elseステートメントとフォームを含むjQueryロジック

答えて

関連する問題