0

我正在设计一个 web 应用程序的原型，我有一个jsFiddle设置来展示给你看。（粗制原型）

我的两个功能完美无缺。

但是，一旦出现选项，下一个函数在调用时将不起作用..

也许我是瞎子？我今天有一个 8 小时的编码会议。

但是一旦选择了一个选项，包含选项的容器应该消失

function begin(){
$( this ).hide();
    $(".center-logo").hide(),
    $(".clapper").show(),
    $(".clapper").text("tap to chose option")
}
function movieChoice(){
    $("#film-list").fadeIn('slow'),
    $(movieList.movies).each(function(index){$("#movies").append('<li class="selector" id="'+this.rating+'">' + this.name  + '</li>');});
}
function movieSelector(){
    $("#film-list").fadeOut('slow')
    $(".clapper").hide()
    $(".date").show()
}

$("#begin").on( "swiperight", begin)
$(".clapper").on( "tap", movieChoice)
$(".selector").on( "tap", movieSelector)
4

2 回答 2

2

改变这个

$(".selector").on( "tap", movieSelector)

至

$("#movies").on("tap", ".selector", movieSelector)

你可以走了。您的代码不起作用，因为在您绑定selector时movieSelector()，它还不可用。这应该可以解决这个问题，因为movies当 DOM 为ready. 还有另一种方式。除了绑定tap到最近的静态父级（在本例中为movies），您还可以将其绑定到document.

$(document).on("tap", ".selector", movieSelector)

您的代码还有两个问题：

  1. 您正在使用ready事件来完成这一切。考虑使用这样的页面事件pageinit或pageshow绑定您的数据/初始化内容等。但是由于您的代码中甚至没有data-role=page，我建议您从问题中删除 jQM 标记。

  2. 此外，您使用了很多,而不是;. 你可能想改变它。

于 2013-08-02T16:00:25.757 回答
1

你需要了解#movies

$("#movies").on( "tap", '.selector', movieSelector)

检查这里http://jsfiddle.net/SM5QJ/3/

问题是您将它绑定到 dom 中不存在的元素。因此，您可以做的是将它绑定到#movies 并告诉它在 .selector 上的点击事件上 lissen 以这种方式执行此操作将使其在附加到 dom 的项目上保持更新。

你可以在这里阅读更多关于它的信息http://api.jquery.com/on/

于 2013-08-02T15:59:44.377 回答