传递参数时 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');
  });
}