Question

我有這個JavaScript這使得一個HTML

var html = "<input type='button' class='btn btn-sm btn-primary' value='Ok'" + 
            "onclick='TaskFinishedRequestMode(" + data[i].TaskFinishedRequest + "," + data[i].EmpTaskAssignCompletionId + "," + data[i].RequestById + "," + data[i].TeamLead + ", \'" + data[i].Employee_Name + "\' , \'" + data[i].ProjectName + "\')'/>" ; 

的問題是，它是呈現HTML像這樣帶有換行符

因此我得到這個錯誤，因爲我按下按鈕

未捕獲的SyntaxError：無效的或意外的標記

更新：

的數據是字符串數據[I] .Employee_Name，數據[I] .ProjectName而其餘部分是整數。

Answer 1

問題出在var html = " ... onclick='TaskFinishedRequestMode(\" ...)'"。這會讀取爲html = " ... onclick='TaskFinishedRequestMode(\"，其餘數據會引發語法錯誤。

考慮到你正在使用雙引號你的主絃聲明，單引號你內心onclick，你前面加上一個反斜槓需要逃生包含的所有onclick內雙引號（\"）如下：

var html = "<input type='button' class='btn btn-sm btn-primary' value='Ok' onclick='TaskFinishedRequestMode(\" + data[i].TaskFinishedRequest + \",\" + data[i].EmpTaskAssignCompletionId + \",\" + data[i].RequestById + \",\" + data[i].TeamLead + \", &quot;\" + data[i].Employee_Name + \"&quot; , &quot; \" + data[i].ProjectName + \" &quot;)'/>"; 
 
document.write(html);

希望這有助於！ :)

Answer 2

純JS，使用對象創建了字符串創建

function TaskFinishedRequestMode() { 
 
    console.log(arguments); 
 
} 
 

 
var data = [{ 
 
    TaskFinishedRequest: 1234, 
 
    EmpTaskAssignCompletionId: 5678, 
 
    RequestById: 9101112, 
 
    TeamLead: "ThaPope", 
 
    Employee_Name: `Mark 
 
Wal 
 

 
Berg (sp)`, 
 
    ProjectName: `Crazy 
 

 

 

 

 

 

 
New Lines` 
 
}]; 
 
var i = 0; 
 
var input = document.createElement('input'); 
 

 
input.type = 'button'; 
 
input.classList.add('btn'); 
 
input.classList.add('btn-sm'); 
 
input.classList.add('btn-primary'); 
 
input.value = 'Ok'; 
 
input.onclick = function() { 
 
    TaskFinishedRequestMode(
 
    data[i].TaskFinishedRequest, 
 
    data[i].EmpTaskAssignCompletionId, 
 
    data[i].RequestById, 
 
    data[i].TeamLead, 
 
    data[i].Employee_Name, 
 
    data[i].ProjectName 
 
); 
 
}; 
 

 
document.body.appendChild(input);

Answer 3

我會強烈建議你讓你的生活是沒有創建的onclick屬性與您的字符串更容易。這迫使你以一種不必要的方式跟蹤開盤和收盤報價。

你可以先創建HTML：

var htmlString = "<input type='button' class='btn btn-sm btn-primary' value='Ok'/>"; 
$('#container').html(htmlString); 

然後，針對您的新的輸入元素，並添加點擊監聽：

$('#container > input').on('click', function (event) { 
    TaskFinishedRequestMode(
    data[i].TaskFinishedRequest, 
    data[i].EmpTaskAssignCompletionId, 
    data[i].RequestById, 
    data[i].TeamLead, 
    data[i].Employee_Name, 
    data[i].ProjectName 
); 
}); 

Answer 4

如果解釋問題正確，您可以使用jQuery(html, attributes)避免使用全局事件處理器屬性。

在環可以定義期望參數爲陣列的元素，其餘使用在元件功能TaskFinishRequestMode參數，Function.prototype.apply()傳遞預期功能參數的陣列。

var data = [{ 
 
    TaskFinishedRequest: 1, 
 
    EmpTaskAssignCompletionId: 2, 
 
    RequestById: 3, 
 
    TeamLead: 4, 
 
    Employee_Name: 5, 
 
    ProjectName: 6 
 
}]; 
 

 
function TaskFinishRequestMode(...args) { 
 
    console.log(args); // `[1,2,3,4,5,6]` 
 
} 
 

 
for (var i = 0; i < data.length; i++) { 
 

 
    var args = [ 
 
    data[i].TaskFinishedRequest, 
 
    data[i].EmpTaskAssignCompletionId, 
 
    data[i].RequestById, 
 
    data[i].TeamLead, 
 
    data[i].Employee_Name, 
 
    data[i].ProjectName 
 
    ]; 
 

 
    var html = $("<input>", { 
 
    "type": "button", 
 
    "class": "btn btn-sm btn-primary", 
 
    "value": "Ok", 
 
    "on": { 
 
     "click": function() { 
 
     // pass `args` array as parameter to `TaskFinishRequestMode` 
 
     TaskFinishRequestMode.apply(null, args); 
 
     } 
 
    } 
 
    }); 
 
    $("body").append(html) 
 
}

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

Answer 5

試試這個。

var html = "<input type='button' class='btn btn-sm btn-primary' value='Ok' " + 
       "onclick='TaskFinishedRequestMode(" + 
        data[i].TaskFinishedRequest + ", " + 
        data[i].EmpTaskAssignCompletionId + ", " + 
        data[i].RequestById + ", " + 
        data[i].TeamLead + ", \"" + 
        data[i].Employee_Name + "\", \"" + 
        data[i].ProjectName + "\")' />";