从多个div标签中选择特定元素作为点击事件主干

Question

I have a html template

<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>

Also I want to bing an event click on this based on class subtemplate-wrapper. How do i get which elemt was was clicked ? I want to later get the access the value of the element clicked.

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

Answer 1

Use

var $clicked_element = $(ev.target)

This will give you the element on which the event has occurred.

And then the usual $clicked_elemen.val()

ev.currentTarget will always give you the element to which the event was bound, in this case, <div class="subtemplate-wrapper">

Also, if you really want a click handler only on the TextArea , you should rather have your selector as

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

than on the wrapper itself.

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());

    },

As I commented above, you should not bind to the wrapper because when use clicks in the text area, it will execute. You should bind do something like this:

<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());

    },