Databases
StackOverflow2013
Postsdbo
POCan't Dynamically Bind Click Handler Using Backbone and jQuery Mobile and Sender Data
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't Dynamically Bind Click Handler Using Backbone and jQuery Mobile and Sender Data
    primarykey
    data
    text
    <p>I'm following a tutorial here: <a href="http://blog.chariotsolutions.com/2012/01/from-list-to-details-view-using.html" rel="nofollow">http://blog.chariotsolutions.com/2012/01/from-list-to-details-view-using.html</a></p> <p>I am trying to dynamically bind a click handler to a listview item as it is rendered. The method described in the link above does not work. I have tried several alternatives..</p> <p>The tutorial suggests this in the render function: (template is below)</p> <pre><code> activities.each(function(activity){ var renderedItem = template(activity.toJSON()), $renderedItem = $(renderedItem); //convert the html into an jQuery object $renderedItem.jqmData('activityId', activity.get('id')); //set the data on it for use in the click event $renderedItem.bind('click', function(){ //This part is different in tutorial, but irrelevant alert("Hello."); alert($(this).jqmData('activityId')); //'this' represents the element being clicked }); listView.append($renderedItem); }); </code></pre> <p>This does not work. The buttons get created, but nothing happens when I click, and Chrome's dev tools show only two click event listeners: document, and document</p> <p>I have tried these as substitutes but nothing works. No alert message, no breakpoint hit, no registered click event listeners. ...</p> <pre><code>$renderedItem.on('click', function(){ alert("Hello."); alert($(this).jqmData('activityId')); //'this' represents the element being clicked }); $renderedItem.live('click', function(){ alert("Hello."); alert($(this).jqmData('activityId')); //'this' represents the element being clicked }); </code></pre> <p>I have also tried the standard Backbone way of registering events to no avail...</p> <pre><code>events: { 'click .activity-list-item':'btnSelected' }, ... btnSelected: function(){ alert("Hello"); //This is what I really want. Some data attached to the sender alert($(this).jqmData('activityId')); } </code></pre> <p>This is template:</p> <pre><code>&lt;li&gt;&lt;a href="#activity-details" class="activity-list-item"identifier="&lt;%= id %&gt;"&gt;&lt;%= date %&gt; - &lt;%= type %&gt;&lt;/a&gt;&lt;/li&gt; </code></pre> <p>Thank you, ladies and gentlemen for your time.</p> <p>EDIT: I have done a test and I think, for some reason, the bind is getting removed. I can do this:</p> <pre><code> myCollection.at(0).bind('click', function(){ alert("hello"); }); myCollection.at(0).trigger('click'); </code></pre> <p>...and it works as it should. Is there a reason that the binds might be getting removed?</p> <p>EDIT 2: This is still not solved. Unfortunately my temporary solution was exactly that. I can delete all listview items, repopulate, and refresh and still have clickability, but if I APPEND items to the list, they are not clickable. .bind, .on, .live, .delegate. None of them work. I really wish there was more documentation about this. This is a common programming problem with no common solution.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPop-A-Stash
    1. USPop-A-Stash
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCan't Dynamically Bind Click Handler Using Backbone and jQuery Mobile and Sender Data
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload