How do you register a 'click' event on (protip) tooltip content? - javascript

I'm using http://protip.rocks/ for it's tooltips but I'm having a problem.
So I have :
<span class="tooltip_templates">
<span id="tooltip_content_{TAB_LOOP.ITEM_LOOP.ITEM_ID}">
<!-- BEGIN ITEM_LOOP.CHILD_ITEM_LOOP -->
<!-- IF TAB_LOOP.ITEM_LOOP.ITEM_ID == TAB_LOOP.ITEM_LOOP.CHILD_ITEM_LOOP.P_ID -->
<img class = 'hide' src ="{T_IMAGES_PATH}custom_avatars/item_thumbnails/{TAB_LOOP.ITEM_LOOP.CHILD_ITEM_LOOP.C_ID}.png" title ="{TAB_LOOP.ITEM_LOOP.ITEM_NAME}" id ="{TAB_LOOP.ITEM_LOOP.CHILD_ITEM_LOOP.C_ID}"/>
<!-- ENDIF -->
<!-- END ITEM_LOOP.CHILD_ITEM_LOOP -->
<img class = 'hide' src ="{T_IMAGES_PATH}custom_avatars/item_thumbnails/{TAB_LOOP.ITEM_LOOP.ITEM_ID}.png" title ="{TAB_LOOP.ITEM_LOOP.ITEM_NAME}" id ="{TAB_LOOP.ITEM_LOOP.ITEM_ID}" />
</span>
</span>
and
$( ".tooltip_templates img" ).click(function() {
alert("ok");
});`
the event doesn't fire here, so I checked the source of the page and saw
So it looks like the content was moved to protip-content however, changing the click function's class to .protip-content doesn't fire the event either. Any ideas?
I tried to do some testing here by attaching an alert to all image clicks and as you can see the event isnt called when clicking the image inside of the tooltip..

You're almost there. I think the reason why your DOM Elements [.tooltip_templates img] didn't call the event because it hadn't been called in the DOM after $(document).ready(). You need to attach and fire those events by either using [.on] or [.delegate]:
References:
[on] = http://api.jquery.com/on/
[delegate] = http://api.jquery.com/delegate/
$('.tooltip_templates img').on('click', function(event) {
event.preventDefault();
alert('here');
});
Here's a jsfiddle for a sample reference:
http://jsfiddle.net/qrgphhu6/

Related

jQuery closest() remove() on <a> doesn't work?

Please see this page which has this code:
<div class="pure-control-group query-brand-by-column">
<!-- somethings else -->
<div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
X
</div>
</div>
Clicking the X link should remove its ancestor div.query-brand-by-column as a whole but somehow it's not working. I've checked jQuery docs and this answer and the code seems absolutely all right to me but it simply doesn't work. Any idea?
this in href doesn't refers to anchor element, thus it doesn't work. It refers to window.
You should bind element event handler using jQuery.
Script
$(document).on('click', '.pure-button danger' function(e) {
e.preventDefault();
$(this).closest('.query-brand-by-column').remove();
});
HTML
<div class="pure-control-group query-brand-by-column">
<!-- somethings else -->
<div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
X
</div>
</div>
I will not recommended, However you can use inline onclick handler.
<a onclick="$(this).closest('.query-brand-by-column').remove();" href='#' class="pure-button danger">X</a>
Here is your answer, Enjoy
X
Detach your javascript from your html and remove your item with a click event, right now you aren't triggering any click events:
<script>
$(function(){
$('.pure-form').on('click','.query-brand-by-column a',function(){//this will create and delegate your click event to work on dynamically created items
$(this).closest('.query-brand-by-column').remove();
});
});
</script>

Open modal window with Jquery

I have a working modal which has the following code:
<!-- modal code -->
Follow
<!-- modal window -->
<div id="ex1" style="display:none">
<p> Please <%= link_to "Login", new_user_session_path %> </a> to Extend. </p>
</div>
I made a div class named "extend-button". I want to show the modal by clicking on that div.
<li class="extend-button"> Extend </li>
$(document).ready(function(){
$(".extend-button").mouseup(function(){
$("#ex1").dialog('open');
});
});
This isn't working.
Consider using the click() function. Otherwise all appears well, assuming dialog('open') works as intended. Add a console log to ensure the click event handler is working to help you debug.
$('.extend-button').click(function (e) {
console.log('clicked');
$("#ex1").dialog('open');
});
You need to first move all your jquery codes into the <script> tag. Then replace $(".extend-button").mouseup with $(".extend-button").click.
The difference between a mouseup event and a click event is that, with a mouseup event, you can click your mouse, hold it, and drag the mouse pointer any and everywhere before releasing the mouse to trigger a mouseup event. A click event requires the mousedown and mouseup event to happen on the same element.
The normal expectation is that a click requires both the mousedown and mouseup event.
The following change in HTML made my day. No jquery was needed.
Extend
First of all, make sure you are including the JQuery UI library and CSS file in the <head> of your page.
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
HTML:
<!-- modal code -->
Follow
<!-- modal window -->
<div id="ex1" style="display:none">
<p> Please <%= link_to "Login", new_user_session_path %> </a> to Extend. </p>
</div>
<li class="extend-button"> Extend </li>
You also need to make sure you are wrapping the code in <script> tags. As #elzi mentioned may be better to use a .click() event.
<script type="text/javascript">
$(function(){
$(".extend-button").on("click", function(){
$("#ex1").dialog('open');
});
});
</script>

dynamically loaded content click event not firing

Currently, I am dynamically loading HTML via a dropdown click event (via jquery event)
The problem that arises is my .on event function is not finding the selector to fire the "a" tag click event.
If the original page that is loaded contains html with the "a" tag with the specified class, the click event for that "a" tag works fine, BUT if I dynamically load new content via the jquery event, then IF a clickable "a" tag exists and I click it, the original page just posts back, there is no evidence of the "a" tags click event firing.
Here is a sample of the dynamically loaded content;
<div id="recipedirectionsandimage">
<div id="recipedirections">
<h2 class="recipedirectionsheader"> Recipe Directions</h2>
<ol class="recipesteps">
<li>Pre-Heat oven to 350°, Grease two 9" springform pans</li>
<li>Sift all dry ingredients into a large bowl</li>
<li>Add corn oil, eggs and vanilla, mix well</li>
<li>Fold in walnuts, coconut, carrots and pineapple</li>
<li>Pour batter into the greased pans</li>
<li>Bake for 50 minutes on the middle racks</li>
</ol>
<p>Click <a ID="creamcheesefrosting.txt" class="icing"
href="#">here</a> for frosting recipe</p>
</div>
<div id="recipeimage">
<img src="Images/RecipeImages/carrotcake_160x233.png" alt=""/>
</div>
</div>
Here is how the content is loaded, the html is retrieved via a WCF service which I've confirmed is working;
function resetRecipeHtml(html, recipename) {
$("#lblRecipeLegend").text("Recipe for " + recipename);
$("#recipecard").html(html);
}
Here is the jquery event code, for now this code is just in a script block on the page outside the document ready code ( doesn't work if it's in it either) Note: The alert is there only to prove the event is firing.;
$('#recipedirections p').on('click', 'a.icing', function (e) {
e.preventDefault();
var filename = $(this).attr("id");
alert(filename);
getRecipeHtml(filename);
});
Part of your question
Here is a sample of the dynamically loaded content;
<div id="recipedirectionsandimage">
<div id="recipedirections">
As, recipedirections is also a part of dynamically loaded content. You should use document or nearest static container. You should use recipecard
$("#recipecard").on('click', 'a.icing', function (e) {
e.preventDefault();
var filename = $(this).attr("id");
alert(filename);
getRecipeHtml(filename);
});

jQuery remove div onclick

I can't seem to get my jQuery right to remove a div when I delete something
Code is:
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
I have tried using
$(this).closest('div').remove();
unfortunately this does not work.
Basically there is a list of several divs and I just want them to disappear when clicked.
If your container divs are dynamically added, you need to use event delegation. Try this:
$("#container").on("click", ".amend_order .deleter", function () {
$(this).closest("div").remove();
});
DEMO: http://jsfiddle.net/m6jVP/
If they're added dynamically, then the event binding won't actually find any elements and therefore won't execute when they're clicked. This event handling runs for any elements inside of #container that match the selector .amend_order .deleter when they are clicked.
You can replace #container with a selector that matches a stable (static) element containing these divs you're targeting, using document if necessary.
HTML
<div class="amend_order" data-item_key="1367264719mz7">
<p>Home Made Ice Cream</p>
<p class="small_text">Pistachio</p>
<p>
<a class="edit_item ui-link" href="javascript:void(0);">Edit</a>
----
<a class="deleter ui-link" href="javascript:void(0);">Delete</a>
</p>
</div>
JS
$('.deleter').on('click', function(){
$(this).closest('div').remove();
})
Live sample http://jsfiddle.net/Ny346/
Try pointing to the div:
$('div.amend_order').click(function(){
$(this).remove();
});
or when clicking on the delete button:
$('a.deleter.ui-link').click(function(){
$(this).parent('div').remove();
});
Try this:
$('.deleter').on('click', function(){
$(this).parent().parent().remove;
})
Live Sample

Fancybox 2.0 not working, very simple first test

My page is at www.danielcw.info.
At the bottom I am calling:
$(document).ready(function() {
$("#single_1").fancybox({});
});
On:
<div id="single_1">
TESTTESTEST
</div>
Nothing happens. Can anyone please explain where I am going wrong, I see all the JS and CSS loaded and on the page.
Thank you,
Daniel
Typically, Fancybox is initialized on an anchor tag which points to a div element or a link housing the content to be shown on the Fancybox:
HTML:
Click here to launch Fancybox
<div style="display:none">
<div id="single_1">
Content goes here
</div>
</div>
Javascript:
$(function(){
$('a#fancybox').fancybox({
// Fancybox options here
})
.trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});
Try using,
$(document).ready(function() {
$("a #single_1").fancybox();
});
<a id="single_1" href="#">
TESTTESTEST
</a>
You've merely instantiated the plugin. You have to trigger it now.
So you can add any DOM element and watch for an event then trigger the plugin.
Click me
The JS
$('fancyme').on("click", function() {
$.fancybox('#single_1');
});
OR
You can trigger on page load
$(function(){
$.fancybox('#single_1');
});

Categories

Resources