Develop Reference

Creating a clickable div within a div

for some reason I cannot make this simple thing to work:
for (var i = 0; i < results.length; i++) {
var object = results[i];
$("#recipes_names").append("<div id =" + "recipe" + i + " >");
$("#recipes_names").append(object.get('recipe_title'));
console.log(object);
console.log(object.id + ' - ' + object.get('recipe_title'));
$("#recipe1").click(function(e) {
e.stopPropagation();
alert("inside click");
});
}
},
I create divs within the "recpie_names" div with the name "recipe0"/"recipe1" etc and I can't for the life of me make them clickable.
I'm sure there's a tiniest of mistakes that I make here but I just can't nail it down.
Can you help me out?

Add a class to the div which is appended and instead of adding event on base of id add just one event on class selector and write just on event:
$("#recipes_names").append("<div class='recipe' id =" + "recipe" + i + " >");
and:
$(document).on("click",".recipe",function(e) {
e.stopPropagation();
alert("inside click");
});

You have to delegates your event
$('#recipes_names').on('click', 'div[id^=recipe]', function(e){
e.stopPropagation();
alert("inside click");
});

It looks like you are generating these divs after the fact. So .click will not work.
Try:
$("#recipe1").on('click', function(e) {
e.stopPropagation();
alert("inside click");
});

tooltip inside popover stays after popover is closed - ZeroClipboard

I'm trying to add buttons to popover that will allow user to copy content.
I managed to build prototype: http://jsfiddle.net/Misiu/VUZhL/890/
but I have weird error when using tipsy inside popover:
After clicking on Click for action button I get popover with 2 buttons, they both have tooltips, sometimes after clicking on button tooltip stays visible.
My code:
$(function () {
$('#example').tipsy({
title: 'data-tipsy-title',
gravity: function () {
return this.getAttribute('data-tipsy-gravity') || 'n';
}
});
$(document).on('click', '#example, .tip', function (event) {
$(this).tipsy("hide");
});
$('#example').popover({
placement: 'top',
title: '',
html: true,
template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content no-padding"></div></div>',
content: '<div class="btn-group">' +
'<button type="button" title="link" class="btn btn-default tip number"><span class="fa fa-link"></span></button>' +
'<button type="button" class="btn btn-default tip" title="something else"><span class="fa fa-copy"></span></button>' +
'</div>'
});
$('#example').on('shown.bs.popover', function () {
//tipsy
$('.tip').tipsy({
gravity: 's'
});
//zero clipboard
var clip = new ZeroClipboard($(".tip"));
clip.on("copy", function (event) {
var clipboard = event.clipboardData;
var data = "";
if ($(event.target).hasClass("number")) {
data = "1st button"+new Date()
} else {
data = "second";
}
clipboard.setData("text/plain", data);
ZeroClipboard.deactivate();
});
})
//zero clipboard
ZeroClipboard.config({
hoverClass: "hover"
});
});
My questions:
1. How can this be fixed?
2. Is ZeroClipboard initialized in right place? I can't do that before, because buttons are added when popover is shown for first time.

Jquery mobile swipe

I have tabs within a dynamic page. The tabs works great when pressed but I would like to add a swipe function to it so that users can also swipe to next tab.
Here is my attempt of trying to make the swipe function work
function goToMatchDetailPage(matchHome, matchAway){
first_part_id = matchHome.substring(0,2);
sec_part_id = matchAway.substring(0,2);
var id = first_part_id.concat(sec_part_id);
//create the html template
var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>"
+ matchHome + "</h1></div><div data-role='content'><div data-role='tabs'>"
+ "<div data-role='navbar'>"
+ "<ul>"
+ "<li><a href='#fragment-1'>" + matchHome + "</a></li>"
+ "<li><a href='#fragment-2'>" + matchAway + "</a></li>"
+ "</ul>"
+ "</div>"
+ "<div id='fragment-1'>"
+ "<p>This is the content of the tab 'One', with the id fragment-1.</p>"
+ "</div>"
+ "<div id='fragment-2'>"
+ "<p>This is the content of the tab 'Two', with the id fragment-2.</p>"
+ "</div></div></div>");
//append the new page to the page contanier
matchPage.appendTo($.mobile.pageContainer);
//go to the newly created page
$.mobile.changePage(matchPage);
Here is the ppart that doesn't work
$(function(){
// Bind the swipeleftHandler callback function to the swipe event on div.box
$( "div" ).on( "swipeleft", swipeleftHandler );
// Callback function references the event target and adds the 'swipeleft' class to it
function swipeleftHandler( event ){
//go to the newly created page
$.mobile.changePage('#fragment-2');
}
});
}
!

Try using event delegation:
Because fragment-1 does not exist at the time you are creating the handler, you assign the handler to the document and delegate it to any child elements called fragment-1 that exist now or will exist in the future.
To make it more generic, you can assign classes to the div and delegate to the class instead of an id...
UPDATE
You can't use changepage to go between tabs, instead use the tabs widget active property(http://api.jqueryui.com/tabs/#option-active):
$(document).on("pagecreate", "#page1", function () {
$("#btngo").on("click", function(){
goToMatchDetailPage('Liverpool', 'Southhampton');
});
$(document).on("swipeleft", "#fragment-1", function(){
$(this).parents("div [data-role=tabs]").tabs( "option", "active", 1 );
} );
$(document).on("swiperight", "#fragment-2", function(){
$(this).parents("div [data-role=tabs]").tabs( "option", "active", 0 );
} );
});
Here is a DEMO
The swipe code is assigned to the document and then delegated to the dynamic div. When you swipe on a tab div, we find its parent that is the tab widget container and then set its active tab option to change tabs.

try this simple code
$(document).on("swipeleft", '#'+event.target.id, function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
alert(nextpage.attr('id'));
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$(document).on("swiperight", '#'+event.target.id, function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
}
});

I'm easier than the others.. It's not the whole solution, but you can get my point.
Option 1
$(document).on("swipeleft", '#page1', function () {
$('#fragment-2').trigger('click');
});
Option 2
$(document).on("swipeleft", '#page1', function () {
$(this).find("div [data-role=tabs]").tabs( "option", "active", 1 );
});
Not sure about which one is better thought :)

Button draggable and at the same time contenteditable

I have button that when clicked creates another button.
$('#button')
.click(function (eventClick, posX, posY) {
var htmlData = '<div id="btn' + $.count + '" class="draggable ui-widget-content ui-draggable" ' + 'data-page="' + $.page + '" ';
if (posX != null && posY != null) {
htmlData += 'style="left:' + Math.abs(posX - 439) + 'px; top:' + Math.abs(posY - 124) + 'px;""';
}
htmlData += '><button id="editable' + $.count + '" style="width:100%; height:100%">Button</button></div>';
$('.demo').append(htmlData);
$('.draggable').draggable({
containment: "#workspace",
scroll: false,
cancel: false,
})
.resizable({
containment: "#workspace"
})
.click(function () {
if ($(this).is('.ui-draggable-dragging')) {
return;
}
$(this).draggable("option", "disabled", true);
$(this).attr('contenteditable', 'true');
})
.blur(function () {
$(this).draggable('option', 'disabled', false);
$(this).attr('contenteditable', 'false');
});
$('a.delete').on('click', function (e) {
e.preventDefault();
btnID = $(this).closest('.draggable')[0].id;
//alert('Now deleting "'+objID+'"');
$('#' + btnID + '').remove();
});
$.count++;
});
This javascript fires when the create button is clicked, now this new button that is nested in a div has attributes draggable, resizable, deletable, and the content should supposedly be editable. Now my problem arise when I'm editing the text, the whole button tag is erased when I completely erase the content of it. I'm just left with I think a div tags. I can't seem to find what's the problem.

Looks to me like you are setting the contentEditable attribute on the div, because it has the 'draggable' class. This means everything inside the DIV is fair game to erase, including the button. If you want the text of the button to be editable, you should set the contentEditable attribute on the button instead.

$(this) not working on delegate()

I have some simple code that creates elements on an event, one of the elements is a button and this button has a click event.
<button id="' + packageNum.toString() + '" class="package-dup package-add-dup-' +
packageNum.toString() + '" title="Add Duplicate Parcel">Duplicate Parcel</button>' +
I am just trying to get the id attribute from this button on the button click event.
$(function () {
$("body").delegate(".package-dup", "click", function () {
alert($(this).attr('id'));
})
This shows the $(this).attr('id') element as undefined.
If i try and use a normal
$('.package-dup').click(function () { .... }
The click event does not work at all.
Using jquery 2.0.3

Try using on() and fixing the syntax errors :
$(function () {
$(document).on('click', '.package-dup', function () {
alert( this.id );
});
});
FIDDLE