傳遞參數時 JavaScript 不調用函數

Question

傳遞參數時，JavaScript 不會調用函數。

我正在動態創建 HTML。

checkbox2 = document.createElement("<input type=\"checkbox\"  name=\"wdrs_contact\" checked=\"Yes\" onclick =\"setPartnersInfo('\"+id+\"');\" />");

function setPartnersInfo(ch)
{
    alert(ch)
}

但是當我在函數調用中沒有參數時，它正在工作。

詳情如下：

function createPartnerTable() {

    var partnerInfo = document.getElementById("partnersInfo");
    var data = partnerInfo.value;

    // everything was successful so now come back and update, first clear the old attributes table
    var partnersBody = document.getElementById("partnersBody");
    var rowCount = partnersBody.rows.length;
    for( var i = 0; i < rowCount; i++ )
    {
        partnersBody.deleteRow(0);
    }

    if (data ==null || data.length==0)
        return;

    // now parse and insert each partner row
    //alert("data : "+data);
    var index = 0;
    var lastIndex = 0;
    while( index < data.length && index != -1 )
    {
        lastIndex = data.indexOf("|", index);
        if( lastIndex == -1 ){
            break;
        }

        var id = data.substring(index, lastIndex);

        index = lastIndex + 1;
        lastIndex = data.indexOf("|", index);
        var name = data.substring(index, lastIndex);

        index = lastIndex + 1;
        lastIndex = data.indexOf("|", index);
        var partnerType = data.substring(index, lastIndex);

        index = lastIndex + 1;
        lastIndex = data.indexOf("|", index);
        var status = data.substring(index, lastIndex);

        index = lastIndex + 1;
        lastIndex = data.indexOf(";", index);
        var jdeCode = data.substring(index, lastIndex);

        //ganessin
        index = lastIndex + 1;
        lastIndex = data.indexOf("#", index);
        var wdrsContact = data.substring(index, lastIndex);

        row = partnersBody.insertRow(partnersBody.rows.length);

        //check box with id for removal
        var checkboxCell = row.insertCell(0);
        checkboxCell.align="center";
        var checkbox = document.createElement('<input type="checkbox"  name="selectedPartnerIds" />');
        //var checkbox = document.createElement("input");
        //checkbox.type = 'checkbox';
        //checkbox.checked=false;
        //checkbox.name = 'selectedPartnerIds';
        checkbox.value=id;
        //checkbox.style.align = "center";
        //checkbox.style.width = '40%';
        checkboxCell.appendChild(checkbox);

        var check = document.getElementsByName('selectedPartnerIds');

        //Name
        var nameCell = row.insertCell(1);
        nameCell.appendChild(document.createTextNode(name));

        //Partner Type
        var partnerTypeCell = row.insertCell(2);
        partnerTypeCell.align="center";
        partnerTypeCell.appendChild(document.createTextNode(partnerType));

        //Status
        var statusCell = row.insertCell(3);
        statusCell.align="center";
        statusCell.appendChild(document.createTextNode(status));

        //JDE Code
        var jdeCodeCell = row.insertCell(4);
        jdeCodeCell.align="center";
        jdeCodeCell.appendChild(document.createTextNode(jdeCode));

        //ganessin
        var checkboxCell2 = row.insertCell(5);
        checkboxCell2.align="center";
        var checkbox2 = "";
        //alert("wdrsContact "+wdrsContact);
        var x = "setPartnersInfo("+id+")";
            alert("x = "+x);
        if(wdrsContact == "true")
        {
            alert("true");

            //checkbox2 = document.createElement('<input type="checkbox"  name="wdrs_contact" checked="Yes" onclick="+x+" onchange="+x+" />');
            checkbox2 = document.createElement("<input type=\"checkbox\"  name=\"wdrs_contact\" checked=\"Yes\" onclick =\"setPartnersInfo(\"+id+\");\" />");
            //String(document.createElement('<input type="checkbox"  name="wdrs_contact" checked="Yes" onchange="setPartnersInfo("+id+");"/>'))
        }
        else
        {
            alert("false");
            //checkbox2 = document.createElement('<input type="checkbox"  name="wdrs_contact" onclick="+x+" onchange="+x+" />');
            checkbox2 = document.createElement("<input type=\"checkbox\"  name=\"wdrs_contact\" onclick=\"setPartnersInfo(\"+id+\");\" />");
        }
        //alert("id "+id);
        //checkbox2.value=id;
       // alert("checkbox2 "+checkbox2);
        checkboxCell2.appendChild(checkbox2);

        // increment the index to process next
        index = lastIndex + 1;
    }

}

Answer 1

以下將產生語法錯誤：

"onclick =\"setPartnersInfo('\"+id+\"');\""

你應該使用：

"onclick =\"setPartnersInfo(\'"+id+"\');\""

或者，如果您的 id 是數字（您不需要引號）：

"onclick =\"setPartnersInfo("+id+");\""

如果您希望在 html 屬性中使用雙引號，則必須將它們轉換為"

所以以下也應該起作用：

"onclick =\"setPartnersInfo(""+id+"");\""

盡管應該不是真正正確的詞，因為使用這樣的事件偵聽器生成 html 並不是最好的方法。

所以總的來說你的字符串應該是：

("<input type=\"checkbox\"  name=\"wdrs_contact\" checked=\"Yes\" onclick =\"setPartnersInfo('"+id+"');\" />");

雖然要一直逃避逃避，為什么不使用：

('<input type="checkbox"  name="wdrs_contact" checked="Yes" onclick ="setPartnersInfo(\''+id+'\');" />');

為了改進

實現您正在做的事情的更好方法是將您的代碼與您的標記分開，讓瀏覽器生成您的標記，這更容易閱讀並且速度更快 - 而且這意味着您不必擔心那么多關於轉義引號 ;)

checkbox2 = document.createElement('input');
checkbox2.type = 'checkbox';
checkbox2.name = 'wdrs_contact';
checkbox2.checked = 'checked';
checkbox2.onclick = function(){
  setPartnersInfo(id);
}

上面要注意的一個主要區別是，在您將id var 放入 html 字符串之前 - 它的當前值記錄在該字符串中。 上面的 id 變量的引用被記住，但不是 value 。 如果您在此之后的任何時候更改id的值，無論它在哪里被引用，它仍然會更改。 為了解決這個問題，您可以使用closure 。

這是通過將id的值傳遞給一個函數來工作的，該函數基本上將用於存儲id值的變量更改為stored_id ，然后該函數返回一個用作事件處理程序的函數。 這個事件處理函數可以訪問stored_id var，無論你改變多少id ， stored_id不會改變。 這有點復雜，如果您不了解閉包，那么這是一個值得閱讀的好主題。

checkbox2.onclick = (function(stored_id){
  return function(){setPartnersInfo(stored_id);};
})(id);

為了進一步改善上述情況，您應該避免使用內聯事件處理程序，因此：

checkbox2 = document.createElement('input');
checkbox2.type = 'checkbox';
checkbox2.name = 'wdrs_contact';
checkbox2.checked = 'checked';
/// for modern browsers
if ( checkbox.addEventListener ) {
  checkbox.addEventListener('click', function(){
    setPartnersInfo('your id here');
  });
}
/// for old ie
else {
  checkbox.attachEvent('onclick', function(){
    setPartnersInfo('your id here');
  });
}