Onclick事件Javascript和JQuery

Question

我的main.js文件中包含以下代碼段

function one(){
  //some code
  var btn = "<button type='submit' id='processReceipt' class='btn btn-primary' onclick='form_new_receipt()'>Submit</button>";

  document.querySelector('#showGrower').innerHTML += btn;
}

提交按鈕正在調用的功能如下

$(document).ready(function() {
  // Do your event binding in JavaScript, not as inline HTML event attributes:
  $("#processReceipt").on("click", form_new_receipt);
  function form_new_receipt() {
    alert('before function');
  }
});

由於沒有顯示警報，我可能會錯過什么-這意味着未調用該函數。

我已經在下面嘗試過了，但是沒有用-這就是為什么我添加了$（document）.ready

function form_new_receipt() {
  alert('before function');
}

Answer 1

如果要在javascript中綁定單擊處理程序，則需要在將按鈕添加到DOM之后設置單擊處理程序。

您可以在one()函數內添加點擊處理程序。 （我已經從按鈕中刪除了onclick屬性）。

function one(){
//some code
var btn = "<button type='submit' id='processReceipt' class='btn btn-primary'>Submit</button>";

document.querySelector('#showGrower').innerHTML += btn;

    $("#processReceipt").on("click", form_new_receipt);
    function form_new_receipt() {
        alert('before function');
    }
}

另外，您可以做的是將點擊處理程序附加到諸如body類的父靜態元素上

$(document).ready(function() {
    // Do your event binding in JavaScript, not as inline HTML event attributes:
    $('body').on("click", "#processReceipt", form_new_receipt);
    function form_new_receipt() {
        alert('before function');
    }

});

當然，您也不想忘記調用one()函數。

兩種情況都鏈接到jsfiddle：

https://jsfiddle.net/jej453se/

https://jsfiddle.net/jej453se/1/

Answer 2

您缺少呼叫one（）的權限，請參見以下代碼

<div id="showGrower"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function one(){
    var btn = "<button type='submit' id='processReceipt' class='btn btn-primary' onclick='form_new_receipt()'>Submit</button>";
    document.querySelector('#showGrower').innerHTML += btn;
}

$(document).ready(function() {
    one();  // Call one() function 
    $("#processReceipt").on("click", form_new_receipt);
    function form_new_receipt() {
        alert('before function');
    }
});
</script>

Answer 3

無需vanillaJS，因為您使用的是jQuery，因此最好還是避免將inline-event用作onclick並僅從jQuery代碼附加您的click事件，如以下代碼片段所示。

希望這可以幫助。

 $(document).ready(function() { one(); }); function one(){ $('#showGrower').append("<button type='submit' id='processReceipt' class='btn btn-primary'>Submit</button>"); $("#processReceipt").on("click", form_new_receipt); } function form_new_receipt() { alert('before function'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="showGrower"></span> 

Answer 4

問題是什么？ 預期的行為是什么？ 當前的非預期行為是什么？ 順便說一句，如果您稍后使用jQuery添加onclick="" ，則無需在HTML中放置它。 無論如何，您的代碼有兩個概念性問題：

如果要使用jQuery，則必須在創建元素后將其綁定：

function one(){
    //some code
    var btn = "<button type='submit' id='processReceipt' class='btn btn-primary'>Submit</button>";

    document.querySelector('#showGrower').innerHTML += btn;

    $("#processReceipt").on("click", function form_new_receipt() {
        alert('before function');
    }
}

如果要在HTML中使用onclick ，則必須在全局范圍內聲明該函數

function form_new_receipt() {
    alert('before function');
}

您也可以使用創建元素

var a = document.createElement('button');

並以編程方式分配屬性

a.type = 'submit';
...

這樣可以大大加快速度，並允許您綁定諸如

a.addEventListener('click', (eventArg) => {
    alert('hello!');
}

Answer 5

這是你要找的東西嗎？

 function one(){ var btn = "<button type='submit' id='processReceipt' class='btn btn-primary' onclick='form_new_receipt()'>Submit</button>"; $('#showGrower').append(btn); } $(document).on('click', '#processReceipt', function() { one() }); function form_new_receipt(a) { alert('before function'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="showGrower"></div> <button id="processReceipt" type="button">Click me</button> 

Answer 6

第一：為什么要創建兩種代碼（普通javascript和jquery）。 您只需一種類型就可以實現您想要的。

但是，仍然以您的代碼為基礎，創建了一個codepen 。 請嘗試，它有效：

https://codepen.io/vishalkaului/pen/ZapXpG

為什么它不起作用的問題是您沒有執行function one 。 我將其更改為IIFE ，它將自動運行而無需顯式調用。