javascript - JavaScriptボタンのデバッグ

Question

2つの別々のボタンによってトリガーされる2つのJavaスクリプト関数があります。djangoテンプレート内からこれを実行しようとしています。 Button 1動作しますが、Button 2動作しません。ボタン2を機能させようとしています。ボタン2が機能しない理由は何ですか？またはそれを修正する方法は？

<script type="text/javascript">
    function addMore()
    {
      alert("Click!");
    }
</script>

<script>
    $('#add_more').click(function() {
        alert('click');
    });
</script>

<button onclick="addMore()">Button 1</button>
<input type="button" value="Button 2" id="add_more">

Answer 1

コードが実行される前にドキュメントが確実にロードされるように、常に jQuery ready関数を使用する必要があります。例えば：

$(function() {
    $('#add_more').click(function() {
        alert('click');
    });
});

Answer 2

これをラップする必要があるかもしれません：

$(document).ready(function () {
    $('#add_more').click(function() {
        alert('click');
    });
});

http://jsfiddle.net/HF5Bd/

Answer 3

メソッドでコードをラップします$(document).ready()。元、

$(document).ready(function(){
       $('#add_more').click(function() {
        alert('click');
    });
});

.ready()ドキュメント全体の準備が整うと、メソッド内の関数が初期化されます。

Answer 4

1) 2 番目のスクリプトが DOM の前に読み込まれます。使用する必要がありますdocument.ready

$(document).ready(function(){
    $('#add_more').click(function() {
     alert('click');     
    });
 }); 

---

2）別のオプションは移動することです

<script>
    $('#add_more').click(function() {
     alert('click');     
    }); 
</script>  

下

<input type="button" value="Button 2" id="add_more">