Databases
StackOverflow2013
Postsdbo
POJQuery .Clone() loses click event
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery .Clone() loses click event
    primarykey
    data
    text
    <p>I am using quicksand to add some cool sorting to my website.</p> <p><a href="http://razorjack.net/quicksand/docs-and-demos.html#examples">http://razorjack.net/quicksand/docs-and-demos.html#examples</a></p> <p>But I am having an issue that when I clone my data (content) to sort, the click events get lost. </p> <p>My website is andrewsimonmcallister.tv, it is the video section that I am talking about. I will try and give as much information as possible, if i am missing anthing just ask.</p> <p>Here is the HTML section</p> <pre><code>&lt;ul id="videolist"&gt; &lt;li data-id="1" data-type="tv" class="videoitem"&gt; &lt;div name="video" class="video shadow"&gt;&lt;img src="images/video/planetoftheapemen.jpg" border=0&gt;&lt;videotitle&gt;TV Series : Planet of the Apemen&lt;/videotitle&gt;&lt;p&gt;Clip from the National TV series produced by the BBC 'Planet of the Apemen: Battle for Earth'. This is the opening scene as we sweep over the mountains and see the tribes men tracking their kill. The cue is big and sweeping to match the imagery with a ostinato combined with a sweeping string melody.&lt;/p&gt;&lt;a href="#videoplayer" class="fancybox" name="playvideo" rel="planetoftheapemen/mountain"&gt;&lt;div class="watch"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt; &lt;default&gt;1&lt;/default&gt; &lt;date&gt;98&lt;/date&gt; &lt;sorttype&gt;TV&lt;/sorttype&gt; &lt;/li&gt; &lt;li data-id="2" data-type="film" class="videoitem"&gt; &lt;div class="video"&gt;&lt;img src="images/video/macropolisend.jpg" border=0&gt;&lt;videotitle&gt;Film : Macropolis&lt;/videotitle&gt;&lt;p&gt;Macropolis is a stop animation film produced by Flickerpix and directed by Joel Simon. In this particular scene our main protagonists finally get acceptance as a small boy buys them and takes them home. This is the final scene for the movie.&lt;/p&gt;&lt;a href="#videoplayer" id="playvideo1" class="fancybox" rel="macropolis/ending"&gt;&lt;div class="watch"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt; &lt;default&gt;2&lt;/default&gt; &lt;date&gt;97&lt;/date&gt; &lt;sorttype&gt;FILM&lt;/sorttype&gt; &lt;/li&gt; &lt;li data-id="3" data-type="scoring" class="videoitem"&gt; &lt;div class="video"&gt;&lt;img src="images/video/orchestra.jpg" border=0&gt;&lt;videotitle&gt;Scoring Session : Looking Glass&lt;/videotitle&gt;&lt;p&gt;Live recording session for the very delicate Looking Glass cue, taken from the drama of the same name. This cue features English Horn, Harp, Piano and Strings.&lt;/p&gt;&lt;a href="#videoplayer" id="playvideo2" class="fancybox" rel="scoring/lookingglass"&gt;&lt;div class="watch"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt; &lt;default&gt;3&lt;/default&gt; &lt;date&gt;99&lt;/date&gt; &lt;sorttype&gt;ZSCORING&lt;/sorttype&gt; &lt;/li&gt; &lt;li data-id="4" data-type="scoring" class="videoitem"&gt; &lt;div class="video"&gt;&lt;img src="images/video/brass-section.jpg" border=0&gt;&lt;videotitle&gt;Scoring Session : Family Retreat&lt;/videotitle&gt;&lt;p&gt;Recording from a live scoring session for the title track to the movie Family Retreat. It's big, fun and light hearted.&lt;/p&gt;&lt;a href="#videoplayer" id="playvideo3" class="fancybox" rel="scoring/familyretreat"&gt;&lt;div class="watch"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt; &lt;default&gt;4&lt;/default&gt; &lt;date&gt;100&lt;/date&gt; &lt;sorttype&gt;ZSCORING&lt;/sorttype&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>On the click event for the video link, I clone the data / content</p> <pre><code>$("#open-videos").click(function(){ console.log("Inside video"); $(currentSection).hide(); $("#video-player").hide(); $("#contentbg").fadeIn(); $("#videos").fadeIn(); $filterType = $('input[name="type"]'); $filterSort = $('input[name="sort"]'); console.log("videos is " + $videos); if ($videos== null) { console.log("setting videos"); $videos = $("#videolist"); } $videosdata = $videos.clone(); currentSection = "#videos"; }); </code></pre> <p>I have a click event on the tag on each div that basically sets which video to play before fancy box kicks in</p> <pre><code>$("a[id^='playvideo']").click(function(e){ var videoselected = $(this).attr('rel'); console.log("Clicked on link, rel value is " + videoselected); $("#jquery_jplayer_9").jPlayer({ play: function() { // To avoid both jPlayers playing together. $(this).jPlayer("pauseOthers"); }, swfPath: "../js", supplied: "m4v", cssSelectorAncestor: "#jp_container_9" }); console.log("setting media to video/" + videoselected + ".m4v"); $("#jquery_jplayer_9").jPlayer( "setMedia", { m4v: "video/" + videoselected + ".m4v" }); console.log("Try and play now!"); }); </code></pre> <p>This event works until you click on one of the radio buttons at the top and perform a sort. Then the event gets lost.</p> <p>Here is the sort code</p> <pre><code> (function($) { $.fn.sorted = function(customOptions) { var options = { reversed: false, by: function(a) { return a.text(); } }; $.extend(options, customOptions); $data = $(this); arr = $data.get(); arr.sort(function(a, b) { var valA = options.by($(a)); var valB = options.by($(b)); if (options.reversed) { return (valA &lt; valB) ? 1 : (valA &gt; valB) ? -1 : 0; } else { return (valA &lt; valB) ? -1 : (valA &gt; valB) ? 1 : 0; } }); return $(arr); }; })(jQuery); </code></pre> <p>As you can see I have added console logging to show where things are firing so if you open up your java console you can see the a event is getting lost.</p> <p>To fully demo - hit the website, click on video menu item. Then click on the first planet of the apemen video, you can see the console logging and the video will play. Then click on sort by date. Click on say macropolis, no a evets have fired this time and the video is stuck at planet of the apemen. But if you hit the website again, go into the video section and just click on each video without any sorting you can see that the <code>&lt;a&gt;</code> event always fires and it works.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJJJ
    1. USSimsy
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJQuery .Clone() loses click event
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJQuery .Clone() loses click event
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    3. VO
      singulars
      1. POJQuery .Clone() loses click event
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIt's JavaScript, not Java
      singulars
      1. POJQuery .Clone() loses click event
      1. USAlexander
 

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