动态函数 Jquery

Question

您好，我有两个函数，一个带有一个参数，另一个称为“goToMatchDetailPage”，带有两个参数。我试图将这两个变量传递给第二个函数，但它最终只传递给第一个参数并将第二个参数留空，并显示“未定义”。

match.Home 和 match.Away 是我想通过“goToMatchDetailPage”传递的两个动态变量。 它将 match.Home 和 match.Away 作为一个变量，我希望它们分开。

这里是代码

  function generateMatchLink(match){
  //<li data-role="list-divider">Divider</li>

    var currentDate = match.Date;
    var time = match.Time.replace(":00", "");

    if(oldDate != currentDate){
    //debugger
    oldDate = match.Date;
return '<li data-role="list-divider" data-theme="b">\ ' + oldDate + '\ </li><li  data-icon="false"><a href="javascript:void(0)'
    + '" onclick="goToMatchDetailPage(\''
    + match.Home + ',' + match.Away +'\')">'
        + ' <div class="ui-grid-a" data-theme="none" style="height:20px">'
        + ' <div class="ui-block-a" style="width:40%">' + match.Home + '</div>'
        + ' <div class="ui-block-b" style="width:20%">' + time + '</div>'
        + ' <div class="ui-block-c" style="width:40%">' + match.Away + '</div></div></a></li>';

    }else{

    return '<li data-icon="false"><a href="javascript:void(0)'
    + '" onclick="goToMatchDetailPage(\''
    + match.Home + ',' + match.Away +'\')">'
        + ' <div class="ui-grid-a" data-theme="none">'
        + ' <div class="ui-block-a" style="width:40%">' + match.Home + '</div>'
        + ' <div class="ui-block-b" style="width:20%">' + time + '</div>'
        + ' <div class="ui-block-c" style="width:40%">' + match.Away + '</div></div></a></li>';

    }

}

这是第二个功能

function goToMatchDetailPage(matchHome, matchAway){

    //create the html template
    var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>"
      + matchHome + "</h1></div><div data-role='content'><div data-role='tabs'>"
  + "<div data-role='navbar'>"
  +  "<ul>"
  +    "<li><a href='#fragment-1'>" + matchHome + "</a></li>"
  +   "<li><a href='#fragment-2'>" + matchAway + "</a></li>"
  +  "</ul>"
  + "</div>"
  + "<div id='fragment-1'>"
  +  "<p>This is the content of the tab 'One', with the id fragment-1.</p>"
  + "</div>"
  + "<div id='fragment-2'>"
  +  "<p>This is the content of the tab 'Two', with the id fragment-2.</p>"
  + "</div></div></div>");

    //append the new page to the page contanier
    matchPage.appendTo($.mobile.pageContainer);

    //go to the newly created page
    $.mobile.changePage(matchPage);
}

Answer 1

作为使用模板执行此操作的示例（并避免引用问题）：

定义一个未知类型的虚拟脚本块（因此它不会运行）：

<script id="homeTemplate" type="text/template">
    <li data-role="list-divider" data-theme="b">{oldDate}</li>
    <li data-icon="false">
        <a href="javascript:void(0)" onclick="goToMatchDetailPage('{home}','{away}')">
            <div class="ui-grid-a" data-theme="none" style="height:20px">
                <div class="ui-block-a" style="width:40%">{home}</div>
                <div class="ui-block-b" style="width:20%">{time}</div>
                <div class="ui-block-c" style="width:40%">{away}</div>
            </div>
        </a>
    </li>
</script>

这使 HTML 更加简洁和易于维护。只需为每个所需模板创建一个。

注意：我只使用{placeholder}，因为大括号通常不会出现在 HTML 中。它可以是您想要的任何分隔符，也可以只匹配模板中的唯一名称。大括号实际上使匹配的正则表达式 replace 有点难看，因为它们需要转义为 \{ 和 \}，因此您可能希望采用仅使用名称的更简单路线。

通过 id 引用模板：

var homeTemplate = $('#homeTemplate');

用实际值替换你定义的占位符：

homeTemplate = homeTemplate.replace(/\{home\}/g, match.Home);
homeTemplate = homeTemplate.replace(/\{away\}/g, match.Away);
homeTemplate = homeTemplate.replace(/\{time\}/g, time);
homeTemplate = homeTemplate.replace(/\{oldDate\}/g, oldDate);

// Now insert the template
$.mobile.pageContainer.append(homeTemplate);

replaces 显然可以连接起来以缩短代码，但在这里可以阅读。

替换使用regex 的/g“全局”选项，因为replace 默认只替换第一个匹配项

继续（感谢 ezanker 的 cmets）：

jQuery 的优点之一是您根本不需要在 HTML 中包含代码（例如 onclick 处理程序）。

如果您的元素是动态创建的，您可以使用[on][1] 的委托 版本在事件发生时过滤元素。

这次的模板没有代码，只是数据属性中的一些额外数据和一个用于识别元素的类：

例如<a href="#" class="hotlink" data-home="{home}" data-away="{away}">

<script id="homeTemplate" type="text/template">
    <li data-role="list-divider" data-theme="b">{oldDate}</li>
    <li data-icon="false">
        <a href="#" class="hotlink" data-home="{home}" data-away="{away}">
            <div class="ui-grid-a" data-theme="none" style="height:20px">
                <div class="ui-block-a" style="width:40%">{home}</div>
                <div class="ui-block-b" style="width:20%">{time}</div>
                <div class="ui-block-c" style="width:40%">{away}</div>
            </div>
        </a>
    </li>
</script>

home 和 away 值存储在 data- 属性中，而不是传递给您的函数调用。

您可以像这样使用delegated on 连接事件：

$(document).on('click', 'a.hotlink', function(e){
    e.preventdefault();   // This stops the click of the link navigating
    var $link = $(this);
    var home = $link.data('home');
    var away = $link.data('away');
    goToMatchDetailPage(home, away);
});

这基本上是在文档级别监听点击（可以是目标上方不会动态更改的任何元素，但文档是常见的）。当单击事件发生时，它会在第二个参数中应用 jQuery 选择器（在这种情况下，所有 anchors 都带有 hotlink 类）来计算单击了哪个元素，然后针对该元素运行第三个参数中的函数.这允许动态添加的元素产生点击（简单的click() 不起作用）。

Answer 2

我认为您只是缺少一些引号：

onclick="goToMatchDetailPage(\'' + match.Home + ',' + match.Away +'\')

将解析为带有逗号的单个参数：

onclick="goToMatchDetailPage('match.Home, match.Away')

你需要这个：

onclick="goToMatchDetailPage(\'' + match.Home + '\', \'' + match.Away +'\')