Response title
This is preview!
Move this topic
The hyperlink click is not firing inside the dynamic div
in Using jQuery UI
•
5 years ago
I am trying to add the hyperlink button inside the dynamic div, here is my code:
$('#btClickMe').click(function () {
var dynamic_div = $("<div1 id= div" + iCnt + "><a href='#' class='delete'>sudhir</a></div1>").css({
border: '1px solid', position: 'absolute', left: '350', top: 110,
width: '25', height: '25', url: '', padding: '2', margin: '50',
});
$(dynamic_div).append('<input type=text readonly=true style="width:28px;font:arial;background-color:transparent;font-size:11px;margin-top:5px;margin-left:-1px;text-align:center;border:0px;" id=tb' + iCnt + ' value=' + e.options[e.selectedIndex].value + '>');
$(dynamic_div).appendTo('#ctl00_BodyContent_divResize').draggable();
iCnt = iCnt + 1;
document.getElementById('ctl00_BodyContent_HdnDivCount').value = iCnt;
});
any idea how to fix this, if I move the same code with static data it will work fine.
Replies(23)
I assume you have some code like
- $(".delete").click(function(e){…})
You probably need code like
- $(document).on("click",".delete",function(e){…});
But it may just be the problem of clicking a link in a draggable.In which case you want to use a draggable handle inside the draggable div.
JΛ̊KE
Leave a comment on jakecigar's reply
yes, I am drawing the objects on the canvas and adding the feature to delete specific object, here is my complete code:
<script type="text/javascript">//<![CDATA[
$(window).load(function () {
$(document).ready(function () {
$('a.delete').on('click', function (e) {
alert('sudhir');
e.preventDefault();
imageID = $(this).closest('.tb')[0].id;
alert('Deleting Object "' + imageID + '"');
$(this).closest('.tb')
.fadeTo(300, 0, function () {
$(this)
.animate({ width: 0 }, 200, function () {
$(this)
.remove();
});
});
});
});
});//]]>
</script>
$('#btClickMe').click(function () {
var dynamic_div = $("<div1 id= div" + iCnt + "><a href='#' class='delete'>sudhir</a></div1>").css({
border: '1px solid', position: 'absolute', left: '350', top: 110,
width: '25', height: '25', url: '', padding: '2', margin: '50',
});
$(dynamic_div).append('<input type=text readonly=true style="width:28px;font:arial;background-color:transparent;font-size:11px;margin-top:5px;margin-left:-1px;text-align:center;border:0px;" id=tb' + iCnt + ' value=' + e.options[e.selectedIndex].value + '>');
$(dynamic_div).appendTo('#ctl00_BodyContent_divResize').draggable();
iCnt = iCnt + 1;
document.getElementById('ctl00_BodyContent_HdnDivCount').value = iCnt;
});
<style>
canvas {
background-image: url('LAYOUT_01.jpg');
border: 10px inset brown;
}
.resizedTextbox {
width: 40px;
height: 30px;
/*cursor: move;*/
}
input[type="text"] {
background: transparent;
border: none;
/*cursor: move;*/
}
</style>
but the event is not firing inside the canvas, can you please look into this.
Leave a comment on Sudhu's reply
I assume you mean that
- $('a.delete').on('click', function (e) {
is not firing.
try
- $(document).on("click",".delete",function(e){
JΛ̊KE
PS I don't see you drawing anything in a <canvas>
Leave a comment on jakecigar's reply
$(document).on("click",".delete",function(e){
Above line of code is not working as well, its block the static event fire as well.
drawing an object is on button click.
What does ", its block the static event fire as well." mean?
Leave a comment on Sudhu's reply
here is my complete code:
<style type="text/css">
#container {
overflow: auto;
}
.image {
width: 50px;
height: 50px;
float: left;
position: relative;
}
a.delete {
display: block;
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
text-indent: -999px;
background: red;
}
.image:hover a.delete {
display: block;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function () {
$(document).ready(function () {
//$('a.delete').on('click', function (e)
$(document).on("click",".delete",function(e){
{
alert('sudhir');
e.preventDefault();
imageID = $(this).closest('.tb')[0].id;
alert('Deleting Object "' + imageID + '"');
$(this).closest('.tb')
.fadeTo(300, 0, function () {
$(this)
.animate({ width: 0 }, 200, function () {
$(this)
.remove();
});
});
});
});
});//]]>
</script>
<style>
#divContainer, #divResize {
border: dashed 1px #CCC;
width: 30px;
height: 30px;
padding: 5px;
margin: 5px;
font: 13px Arial;
cursor: move;
float: left;
background-color: transparent;
}
div1 {
background-color: white;
/*background: transparent;*/
border-radius: 100%;
margin-left: 50px;
cursor: move;
}
div {
background-color: white;
/*cursor: move;*/
background: transparent;
}
</style>
<style>
canvas {
background-image: url('http://secure.greenboxenergy.net/App_Themes/PropertyDetailImages/LAYOUT_01.jpg');
border: 10px inset brown;
}
.resizedTextbox {
width: 40px;
height: 30px;
/*cursor: move;*/
}
input[type="text"] {
background: transparent;
border: none;
/*cursor: move;*/
}
</style>
<script>
function popupwindow(url, title, w, h) {
var left = (screen.width / 2) - (w / 2);
var top = (screen.height / 2) - (h / 2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
}
var element_pos = 40; // POSITION OF THE NEWLY CREATED ELEMENTS.
var iCnt = 0;
var element_pos1 = 45;
$(document).ready(function () {
var hdnDiv = document.getElementById('ctl00_BodyContent_HdnDivCount');
//alert(hdnDiv);
var HdnDateTime = document.getElementById('ctl00_BodyContent_HdnDateTime');
var tbLabel = document.getElementById('tbLabel');
var ddlHSI = document.getElementById('ddlHSI');
var HdnHSI = document.getElementById('ctl00_BodyContent_HdnHSI');
//alert(tbLabel);
//var ddlTemp = document.getElementById('ddlTemp');
var e = document.getElementById("ctl00_BodyContent_ddlTemp");
//$(function () { $('#divContainer').draggable(); });
//$(function () { $("#divResize").draggable().resizable(); });
// CREATE MORE DIV, WITH 'ABSOLUTE' POSITIONING.
//border: '1px solid', position: 'absolute', left: element_pos,
$('#btClickMe').click(function () {
var dynamic_div = $("<div1 id= div" + iCnt + "><a href='#' class='delete'>sudhir</a></div1>").css({
border: '1px solid', position: 'absolute', left: '350', top: 110,
width: '25', height: '25', url: '', padding: '2', margin: '50',
});
//var dynamic_div = $("<div1 id=div" + iCnt + "></div1>").css({
// border: '1px solid', position: 'absolute', left: '350', top: 110,
// width: '25', height: '25', url: '', padding: '2', margin: '50',
//});
//$(dynamic_div).addClass('ui-draggable');
$(dynamic_div).append('<input type=text readonly=true style="width:28px;font:arial;background-color:transparent;font-size:11px;margin-top:5px;margin-left:-1px;text-align:center;border:0px;" id=tb' + iCnt + ' value=' + e.options[e.selectedIndex].value + '>');
$(dynamic_div).appendTo('#ctl00_BodyContent_divResize').draggable();
iCnt = iCnt + 1;
document.getElementById('ctl00_BodyContent_HdnDivCount').value = iCnt;
});
$('#btDateTime').click(function () {
//alert(document.getElementById('ctl00_BodyContent_HdnDateTime').value);
var dynamic_div1 = $(document.createElement('div')).css({
border: 'none', cursor: 'move', position: 'absolute', background: 'transparent', left: '350',//element_pos1,
top: 65,//$('#ctl00_BodyContent_divResize').height() + 20,
width: '75', height: '100', url: '', padding: '2', margin: '50',
});
//element_pos1 = element_pos1 + $('#ctl00_BodyContent_divResize').width() + 20;
$(dynamic_div1).append('<input type=text readonly=true style="width:170px;background-color:transparent;font:arial;font-size:12px;margin-top:50px;margin-left:-1px;text-align:center;border:0px;" id=tbdatetime' + iCnt + ' value="' + document.getElementById('ctl00_BodyContent_HdnDateTime').value + '">');
$(dynamic_div1).appendTo('#ctl00_BodyContent_divResize').draggable();
iCnt = iCnt + 1;
});
$('#btLabel').click(function () {
var dynamic_div1 = $(document.createElement('div')).css({
border: 'none', cursor: 'move', position: 'absolute', background: 'transparent', left: '350',
top: 36,// $('#ctl00_BodyContent_divResize').height() + 20,
width: '75', height: '100', url: '', padding: '2', margin: '50',
});
element_pos1 = element_pos1 + $('#ctl00_BodyContent_divResize').width() + 20;
$(dynamic_div1).append('<input type=text readonly=true style="width:150px;background-color:transparent;font:arial;font-size:12px;margin-top:90px;margin-top:80px;margin-left:-1px;text-align:center;border:2px;" id=tb' + iCnt + ' value="' + document.getElementById('tbLabel').value + '">');
$(dynamic_div1).appendTo('#ctl00_BodyContent_divResize').draggable();
iCnt = iCnt + 1;
});
$('#ctl00_BodyContent_btHSI').click(function () {
var dynamic_div1 = $(document.createElement('div')).css({
border: 'none', cursor: 'move', position: 'absolute', background: 'transparent', left: '350',
top: 56,// $('#ctl00_BodyContent_divResize').height() + 20,
width: '75', height: '100', url: '', padding: '2', margin: '50',
});
//alert(document.getElementById('ctl00_BodyContent_ddlHSI').value);
element_pos1 = element_pos1 + $('#ctl00_BodyContent_divResize').width() + 20;
//$(dynamic_div1).append('<input type=text readonly=true style="width:150px;background-color:transparent;font:arial;font-size:12px;margin-top:90px;margin-top:80px;margin-left:-1px;text-align:center;border:2px;" id=tb' + iCnt + ' value="' + document.getElementById('tbHSI').value + '">');
$(dynamic_div1).append('<input type=text readonly=true style="width:170px;background-color:transparent;font:arial;font-size:12px;margin-top:50px;margin-left:-1px;text-align:center;border:1px;" id=tbHSI' + iCnt + ' value="' + document.getElementById('ctl00_BodyContent_ddlHSI').value + '">');
$(dynamic_div1).appendTo('#ctl00_BodyContent_divResize').draggable();
iCnt = iCnt + 1;
});
});
</script>
<script type="text/javascript">
Sys.Application.add_load(MyLoad);
function MyLoad(sender) {
//alert(ctl00_BodyContent_divResize.innerHTML);
$get(document.getElementById('ctl00_BodyContent_divResize')).innerHTML += " - text added on client";
}
function GetDivHTML() {
//alert(document.getElementById('HdnDivCount').value);
var hdnDiv = document.getElementById('ctl00_BodyContent_HdnDivContent');
//alert(hdnDiv);
var content = document.getElementById('ctl00_BodyContent_divResize');
hdnDiv.value = content.innerHTML;
//alert(hdnDiv.value);
}
</script>
Leave a comment on Sudhu's reply
Make a demo in jsfiddle.
JΛ̊KE
Leave a comment on jakecigar's reply
Not used the jsfiddle in past, let me try.
Leave a comment on Sudhu's reply
can't add the code to jsfinddle, can you look the code here
Maybe I will look at it in a few days.
JΛ̊KE
Leave a comment on Sudhu's reply
You don't need:
$(window).load(function () {
$(document).ready(function () {
Just use $(document).ready
but the event is not firing inside the canvas
What do you mean by that?
There aren't any HTML elements inside a canvas.
Leave a comment on watusiware's reply
removed the $(window).load(function () {
but still the event is not firing
$('#btClickMe').click(function () {
var dynamic_div = $("<div1 id= div" + iCnt + "><a href='#' class='delete'>sudhir</a></div1>").css({
border: '1px solid', position: 'absolute', left: '350', top: 110,
width: '25', height: '25', url: '', padding: '2', margin: '50',
});
$(dynamic_div).append('<input type=text readonly=true style="width:28px;font:arial;background-color:transparent;font-size:11px;margin-top:5px;margin-left:-1px;text-align:center;border:0px;" id=tb' + iCnt + ' value=' + e.options[e.selectedIndex].value + '>');
$(dynamic_div).appendTo('#ctl00_BodyContent_divResize').draggable();
iCnt = iCnt + 1;
document.getElementById('ctl00_BodyContent_HdnDivCount').value = iCnt;
});
Leave a comment on Sudhu's reply
We haven't seen any HTML that has btClickMe in it.
That's why a fiddle would help.
JΛ̊KE
Leave a comment on jakecigar's reply
but the event is not firing inside the canvas
What do you mean by that?
There aren't any HTML elements inside a canvas.
Does: <button class='btnClickMe'> exist in the page initially, or is it added dynamically?
If it's added dynamically, you need something like:
$(document).on('click', '#btnClickMe', ...
Leave a comment on watusiware's reply
When I placed the hyperlink inside the function and hit the button "btClickMe" the alert message not appears, forgot about the canvas, now I am trying with the function only.
$('#btClickMe').click(function () {
var dynamic_div = $("<div1 id= div" + iCnt + "><a href='#' onclick='alert(sudhir)' class='delete'>sudhir</a></div1>").css({
border: '1px solid', position: 'absolute', left: '350', top: 110,
width: '25', height: '25', url: '', padding: '2', margin: '50',
});
$(dynamic_div).append('<input type=text readonly=true style="width:28px;font:arial;background-color:transparent;font-size:11px;margin-top:5px;margin-left:-1px;text-align:center;border:0px;" id=tb' + iCnt + ' value=' + e.options[e.selectedIndex].value + '>');
$(dynamic_div).appendTo('#ctl00_BodyContent_divResize').draggable();
iCnt = iCnt + 1;
document.getElementById('ctl00_BodyContent_HdnDivCount').value = iCnt;
});
<input type="button" style="float: right; width: 80px;" id="btClickMe" value="Add Temp" />
Leave a comment on Sudhu's reply
Open up the browser's developer tools. Look for errors there. We can help debug what we can't see.
Long ago I mentioned that there is a problem with clicking links inside a draggable. You need to make use of a draggable handle instead of making the entire div draggable.
JΛ̊KE
Leave a comment on jakecigar's reply
I found the issue while checking through developer tool (inspect element), here is the rendered code:
<div1 id="div0" style="border: 1px solid; position: absolute; top: 110px; width: 25px; height: 25px; padding: 2px;" class="ui-draggable"><a href="#" onclick="alert(" sudhir')'="" class="delete">sudhir</a><input readonly="true" style="width:28px;font:arial;background-color:transparent;font-size:11px;margin-top:5px;margin-left:-1px;text-align:center;border:0px;" id="tb0" value="S4MAXDID:66" type="text"></div1>
The onclick event for an alert is wrong as syntax onclick="alert(" sudhir')'=""
now, how do we fix this?
var dynamic_div = $("<div1 id= div" + iCnt + "><a href='#' onclick='alert('sudhir')' class='delete'>sudhir</a></div1>").css({
border: '1px solid', position: 'absolute', left: '350', top: 110,
width: '25', height: '25', url: '', padding: '2', margin: '50',
});
Leave a comment on Sudhu's reply
Don't use onclick. It is very old fashioned.
add to your main code…
$(document).on("click","a.delete", function(){
alert("sudhir");
})
JΛ̊KE
Thanks, it worked. Now I want to delete the parent div when user click on the hyperlink, In this case, div0 (here iCnt is loop variable and the current value is 0)
$(document).on("click", "a.delete", function () {
alert("Want to delete?");
})
var dynamic_div = $("<div1 id= div" + iCnt + "><a href='#' class='delete'>sudhir</a></div1>").css({
border: '1px solid', position: 'absolute', left: '350', top: 110,
width: '25', height: '25', url: '', padding: '2', margin: '50',
});
Leave a comment on jakecigar's reply
I verified that you don't need to use a handle with your draggable, You just need to clean up the HTML and NOT use onclick,
JΛ̊KE
Leave a comment on jakecigar's reply
Leave a comment on jakecigar's reply
$(this).parent().remove();
JΛ̊KE
Thank you so much for helping me out. Everything is working now.
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Sudhu's discussion
{"z7664639":[14737000007593229,14737000007593231],"z2950240":[14737000007588241,14737000007588269,14737000007588271,14737000007588273,14737000007588279,14737000007588281,14737000007599019,14737000007599025,14737000007599027,14737000007599029,14737000007599031],"z661638214":[14737000007595096,14737000007595101,14737000007595103,14737000007595105,14737000007595107,14737000007595115,14737000007595117,14737000007601001,14737000007601003,14737000007601005,14737000007601007]}