如何使用jQuery连接和传递html中的参数值

Question

我正在使用jQuery从ajax rest调用获取值，我正在尝试将这些值连接成'a'标记，以便为我的结果创建一个分页部分（附图）。

我正在发送HTML（divHTMLPages），但结果不是很好，不能正常工作，我尝试过双引号和单引号但仍然没有良好的形式。所以，我想知道这是否是一个很好的方法来完成创建分页所需要的东西。 'a'标签将触发带有四个参数的onclick事件（查询休息呼叫，部门，行限制和显示的起始行）

  if (_startRow == 0) {
    console.log("First page");
    var currentPage = 1;
    // Set Next Page
    var nextPage = 2;
    var startRowNextPage = _startRow + _rowLimit + 1;
    var query = $('#queryU').val();     
    // page Link
    divHTMLPages = "<strong>1</strong>&nbsp;";
    divHTMLPages += "<a href='#' onclick='getRESTResults(" + query + "', '" + _reg + "', " + _rowLimit + ", " + _startRow + ")>" + nextPage + "</a> ";
    console.log("Next page: " + nextPage);
  }

在此先感谢任何帮助。

Pagination

Answer 1

不是试图键入如何在HTML字符串中调用函数，而是将事件侦听器附加到相关元素会更加优雅。例如，假设您要插入元素的父元素称为parent，您可以执行以下操作：

const a = document.createElement('a');
a.href = '#';
a.textContent = nextPage;
a.onclick = () => getRESTResults(query, _reg, _rowLimit, _startRow);
parent.appendChild(a);

一旦附加了一个事件监听器，就像上面的onclick一样，请确保不要更改容器的innerHTML（就像使用innerHTML += <something>一样），因为这会破坏容器内的任何现有侦听器 - 而是使用createElement等方法显式附加元素。 appendChild，如上所示，或使用insertAdjacentHTML（不会重新解析整个容器的内容）。

Answer 2

$(function()
{
var query=10;
var _reg="12";
var _rowLimit="test";
var _startRow="aa";
var nextPage="testhref";
//before divHTMLPages+=,must be define divHTMLPages value
var divHTMLPages = "<a href='#' onclick=getRESTResults('"+query + "','" + _reg + "','" + _rowLimit + "','" + _startRow + "')>" + nextPage + "</a>";
///or use es6 `` Template literals
var divHTMLPages1 = `<a href="#" onclick="getRESTResults('`+query + `','` + _reg + `','` + _rowLimit + `','` + _startRow +`')">` + nextPage + `</a>`;
$("#test").append("<div>"+divHTMLPages+"</div>");
$("#test").append("<div>"+divHTMLPages1+"</div>");
});

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