Question

我有一段代码：

关于HTML正文：

<div data-role="content">
    <section class="ui-grid-c">
      <div class="ui-block-a">Column 1</div>
      <div class="ui-block-b">Column 2</div>
      <div class="ui-block-c">Column 3</div>
      <div class="ui-block-d">Column 4</div>
      <div class="ui-block-a">Column 1</div>
      <div class="ui-block-b">Column 2</div>
      <div class="ui-block-c">Column 3</div>
      <div class="ui-block-d">Column 4</div>
      <div class="ui-block-a">Column 1</div>
      <div class="ui-block-b">Column 2</div>
      <div class="ui-block-c">Column 3</div>
      <div class="ui-block-d">Column 4</div>
      <div class="ui-block-a">Column 1</div>
      <div class="ui-block-b">Column 2</div>
      <div class="ui-block-c">Column 3</div>
      <div class="ui-block-d">Column 4</div>
    </section>
    <button id="show">Show</button>
</div>

在JQM方面：

var word = "";

$(document).on('tap', 'ui-block-a', function(e){                        
                    word = word + $(this).text();
                });
$(document).on('click', '#show', function(e){                        
                    alert(word);
                    word = "";
                });

这部分：

$(document).on('tap', 'ui-block-a', function(e)

未按预期触发。如果我将word = word + $(this).text();替换为alert($(this).text());，则不会显示警告窗口。

另一个问题是，如果我想在'ui-block-b'上编写一个tap事件处理程序，必须编写一个单独的事件处理程序来处理这个事件？我想在任何ui块中发生敲击事件时调用相同的函数$(document).on('tap', 'ui-block-a', function(e)。

Answer 1

这似乎是一个错字。在$(document).on('tap', 'ui-block-a', function(e){中，它应该是.ui-block-a而不是ui-block-a。

关于第二个问题。我有两个建议。

首先对所有这些<div>使用公共类，并将此事件绑定到此公共类。

例如，将一个名为word-add的类添加到所有<div>。

<div class="ui-block-a word-add">Column 1</div>

然后在word-add

上绑定点击事件

$(document).on('tap', 'word-add', function(e){...})

第二个是首先定义一个函数并将此函数绑定到tap事件。

function addWord(e){
    word = word + $(this).text();
}

$(document).on('tap', 'ui-block-a', addWord);
$(document).on('tap', 'ui-block-b', addWord);

ui-block上的tap事件没有触发 - JQuery Mobile

1 个答案: