Question

我有一个html模板

<div class="subtemplate-wrapper">
<div class="cover"></div>
<label>
<span>
Description
<abbr title="required">*</abbr>
</span>
</label>
<textarea required="required"></textarea>
<span class="help-block"> </span>
</div>

另外，我想基于class subtemplate-wrapper点击这个事件。如何点击哪个elemt？我想稍后获取点击元素的值的访问权限。

events: {
          'click .subtemplate-wrapper': 'getTextInput'
        },
        getTextInput: function(ev) {
          var clicked_element = $(ev.currentTarget) // does not give me what is clicked !
        },

Answer 1

使用

var $clicked_element = $(ev.target)

这将为您提供发生事件的元素。

然后是通常的$clicked_elemen.val()

ev.currentTarget将始终为您提供绑定事件的元素，在本例中为<div class="subtemplate-wrapper">

另外，如果你真的想要click上的TextArea处理程序，你应该选择

'click .subtemplate-wrapper textarea': 'getTextInput'

而不是包装本身。

Answer 2

    events: {
      'click .subtemplate-wrapper': 'getTextInput'
    },
    getTextInput: function(ev) {
      var clicked_element = $(ev.currentTarget) // does not give me what is clicked !

      console.log('text is ');
      console.log(clicked_element.find('textarea').val());

    },

正如我在上面评论的那样，你不应该绑定到包装器，因为当在文本区域中使用点击时，它将执行。你应该绑定做这样的事情：

<div class="subtemplate-wrapper">
    <div class="cover"></div>
    <label>
        <span>
            Description
                <abbr title="required">*</abbr>
        </span>
    </label>
    <textarea id="textContent" required="required"></textarea>
    <span class="help-block"> </span>

    <div id="submit">
   Submit
    </div>
</div>


    events: {
      'click #submit': 'getTextInput'
    },
    getTextInput: function(ev) {
      var clicked_element = $(ev.currentTarget) 

      console.log('text is ');
      console.log(clicked_element.parent().find('textarea').val());

    },

从单个事件主干的多个div标签中选择特定元素

2 个答案: