Question

我正在使用JS为我的移动应用程序动态填充无序列表。我正在使用JQuery mobile和Phonegap进行开发。

在我的列表中，我想在单击时调用带参数的函数。我可以在不使用任何参数的情况下调用函数downloadPdf()，但如果我添加它们则不能。我认为它与引号/双重qoutes有关。

var $li = $("<li><a href='#' onclick='downloadPdf('"+val.title+"', '"+val.url+"')'>"+val.title+"</a></li>");

我无法调试，因为我在手机上运行此功能，所以我希望有一个训练有素的人能够看到这里有什么问题。 val.title和val.url都包含字符串类型的值。

Answer 1

不要使用内联事件。您正在使用jQuery，它可以轻松附加事件

var li = $("<li><a href='#'>"+val.title+"</a></li>");
li.find("a").on("click", function(){ downloadPdf(val.title,val.url); });

或使用数据属性和通用的onclick处理程序

var li = $("<li><a class='download' href='#'>"+val.title+"</a></li>");
li.find("a").data("title", val.title).data("url", val.url);

和通用点击

$(document).on("click", "a.download", function (event) {
   var anc = $(this);
   downloadPdf( anc.data("title"), anc.data("url"));
   event.preventDefault();
}

Answer 2

逃避你的报价

var val = {title: 'foo', url: 'http://foo'}

var $li = $('<li><a href="#" onclick="downloadPdf(\'' + val.title + '\',\'' +  val.url + '\')">' + val.title + '</a></li>');
  
function downloadPdf() {
 alert('params:' + JSON.stringify(arguments, null, 2));
}

$('body').append($li);

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

或者为了更好的练习，请使用@epascarello建议的点击事件处理程序。

Answer 3

@epascarello是对的，不要使用内联事件处理程序。

但直接回答这个问题只是逃避双引号：

$("<li><a href='#' onclick='downloadPdf(\""+val.title+"\", \""+val.url+"\")'>"+val.title+"</a></li>");

产地：

<li><a href='#' onclick='downloadPdf("value1", "value2")'>title</a></li>

Answer 4

解决方案

首先，我建议将代码放在多行中，以方便阅读。

var $li = $(''
+ '<li>'
    + '<a href="#" onclick="downloadPdf(\"' + val.title + '\", \"' + val.url + '\")">' + val.title 
    + '</a>'
+ '</li>');

我特意为这个糟糕的模板做了这个。

其次，您需要使用\"或\'

来转义引号

真正的建议

注意epascarello在那里说些什么。他的方式比单线逃逸的方式更好，更容易理解。

在JS参数中放置引号

4 个答案:

解决方案

真正的建议