Please see the link:
http://www.stilgiyin.com/share.php?sshrsrc=http%3A%2F%2Fimages.boyner.com.tr%2FCmsFiles%2FImages%2FProductImages%2FOriginal%2F654000%2F1_1262674.jpg
If you click on the jacket, you will see an alert "here". Looking at the page source, you'll see the onclick that is responsible for this alert.
If you hover over the jacket, you will see a tooltip. I used the jquery tiptip plugin for this tooltip. The plugin requires you to put the tooltip's content within a title attribute.
I'm trying to get an onclick event to fire when the user clicks on the large pink button inside the tooltip. However, it doesn't seem to be working, because the alert I set "intooltip" isn't popping up.
The code for the onclick is:
onclick="alert('intooltip'); clickstatistictit(this.rel); _gaq.push(['_trackEvent', 'outgoing', 'boyner.com.tr', '']); trackConv('995622692', 'JMHBCOzUgAQQpP7f2gM');"
I don't know if the problem is that I have double quotes around intooltip instead of single quotes. However, if I use single quotes, this closes the tooltip content, which begins with title='
Or maybe the issue is something completely different. Any ideas?
Thanks,
Andrew
You should escape the double quotes inside your title attribute, otherwise you will get syntax errors in the onclick handler.
It might also be better to put your event handeling code inside a separate function in your header. You can then use just the function name inside the title attribute instead of the list of functions calls you are using now.
Like you said, the reason is that you use double quotes inside other double quotes. When you check that pink button in firebug, the resulting code says:
onclick="alert("
so it's not interpreted correctly.
The tiptip jQuery plugin doesn't create a new child for every element with a tooltip. Instead it uses a general container and moves it accordingly, thus the tooltip is not a descendant of your element. Thereby the click event won't bubble to your elements onclick handler.
Note that tiptip isn't meant for such kind of tooltips. After all tiptip was originally meant for text tooltips.
Related
I have a problem with a href="... it doesn't work. When i right click on it i can open it in new tab easily but when i left click it doesn't work at all, i think is because of JS script but i have no idea how to change it. It might but that <div id="planes"> getting class="dragged"
Link to: CodePen
And thanks to Jeff Mignone for this script
If you remove this row it will work (line 182):
this.options.element.classList.add("dragged");
Its purpose, as seen at a glance, is to allow you to add a custom style when dragging.
The problem is that for to do so, it adds the class directly to the element that triggered the event. If this element is, for example, the tag 'a' you want, changing the element will interrupt the event handling and the click event will not handled as expected.
A possible solution is to add the class after some time (by using the setTimeout function) or add the class to the parent of the element.
For example, replacing the above line with the following line will solve the problem as well (Don't replace the 10 with 0, it will fail it):
setTimeout(() => this.options.element.classList.add("dragged"), 10);
I was javascript to dynamically add some content, my javascript is like:
document.getElementById("lines").innerHTML += some_of_my_data +"</br>;
How can I create a mouseover event, different on each row?
Please put a little information in the question, otherwise it's close to impossible to answer.
But some notes:
You don't seem to be closing the quotes on your text (after </br>).
Also </br> should be <br>
Here I'm just guessing but you're selecting by id and the id is called lines which suggests many, maybe you're using the id lines multiple times? That would be incorrect and might be what's not working.
See here how to get element's of the same class.
Also for mouse over events, take a looks at this answer.
I am attempting to fire off an AJAX call based on the onclick event for a google map integration. The info_window_content function seen here: http://jsfiddle.net/6xw2y/ is the call to create the divs that reside within the map itself.
The "v" variable does in fact contain a store_id. So in the opening line of that function, it has the following:
var info_window_string = "<div class='maps_popup' id="+v.id+">";
Now I have an onclick event that I have duplicated and modified. The first onclick event works just fine and refreshes the panel as it should. The second onclick event doesn't work and the code for that is below:
$("#div").click(function(){
var store_id = $(this).find("div").attr("id");
var pathname = "ajax=1&store_id="+store_id+"&action=get_nearby_stores&distance="+distance+"&lat="+lat+"&lng="+lng+"&products="+$('#edit-products').val();
$("#pocp_content").load("file1.php?" + pathname);
});
That doesn't seem to work. I've also tried changing the div tag to be like this:
$("div").click(function(){
Which still doesn't work. As an added side hint. At one point I was able to get it to refresh but it was passing map-container as the store_id, instead of the id itself.
What am I missing here?
I agree with Joke_Sense10,
but I think you're probably not binding the event to the right DOM element.
Try to open up the developer console in your browser (while being on the side you develop this code for), and enter $("#div") to see if the element it returns is the one you expect. You can also use console.log($("#div")) in the code for that.
answer in comments
For a larger number of elements, always use .on() method as the latter will bind an single event listener on one of the topmost nodes in the DOM tree.
$(document).on("click","#"+v.id, function(){
I got following problem: I generate a div with "jQuery-Load" links. Theese links inside the div should reload the same div with different parameters. I found a working solution, which generates theese links, which are clickable and... ...trigger the chosen event once. So clicking the same link inside the generated div, after it has been regenerated, doesnt work anymore. Tried a lot of things...
It looks like that now:
click
<div id="aaa0"> I'm the div - level1! </div>
div gets filled - beautyful.
It now contains this: (actually its generated what is why wrote [time] wich is time(); generated in php. as a changing parameter
[...] Link inside Updated Div [...]
when i click the link inside the div it works. when i click it again, it wont...
I want to generate a nice 'click deeper inside the data'-thing, which would be amazing getting this thing work and is the reason why everything must be as best as possible inside the "onclick" event :|
Sorry btw. for the a bit confusing post-style, its a confusing topic, and im not native speaking :)
Thanks for any help or hint in advance,
Harry
Maybe you're missing the concepts between bind and live. In bind, jQuery scans the document and attach a function direct to the element. In live, jQuery attach the function to the document, along with the event and the element as parameters. Once a event bubbles, jQuery check the event and the element, and if it match, then a function executes.
After the first run, the dom has changed, and its gonna work using live.
something like that should work:
click
<div id="aaa0"> I'm the div - level1! </div>
<script>
$('a').live('click', function (e) {
e.preventDefault();
var id = this.id;
$(this).next('div').load('getdetails.php?fNumber=36&env=fun&id=' + id);
});
</script>
basically, what is done is a generic rule, which gives all tags the same behavior. (load next div content). ".live()" is used so that loaded tags work (check the jquery documentation for .live(), or event delegation in general).
I'm not certain about the preventDefault stuff. You might want to use somehting else than tag for the link.
click
made the day :) I don't know exactly why, but maybe its possible preventDefault made the bind and live thing for me. Its working fine, so ...
thanks for the hints! :D
I'm about to make an inplace editor with jquery. It works by clicking the text you want to edit and it replaces the content of it with an input. In the current case with a select tag.
It works fine except with the <a> tag... If you click on an <a> tag it confirms you what to do. You can accept edit mode or cancel it.
If you accept the edit mode, it changes the content of the <a> with a <select>. The problem comes after this point: If you click on the select the parent tag (<a>) fires up a new page load.
I tried to bind a click event on the <a> with a false return, but in this case the select wont work by mouse.
The other way to solve this I think is to bind a click event to the <select> and manipulating somehow the event object...
How to do this? Or is this a wrong approach?
UPDATE:
The base approach is invalid (select inside an a) but I found a solution: Remove the href parameter and you don't need ugly event hacking what does not even work in FF.
(similar problem and its explanation: Select tag inside hyperlink problem)
Don't change the content, change the element. Store the a element somewhere, replace it with a select, and then when you're done, replace back. This way you don't have to bother with the link firing.
function ask ( e )
{
e.preventDefault (); //prevents default browser action
//do whatever
}
element.addEventListener ("click", ask);
why do you want to manipulate the event object? can't you just leave the a-event to return false and set another eventhandler to the select-tag?
Wrapping the <select> in an <a> tag is not valid HTML. Also, hijacking the click event handler of the <a> to fire the select's one is considered an ugly hack. I would recommend you to put the <select> after the <a> in the DOM, and hide the link temporarily for the duration of the editing.
One thing I would try is to play with jQuery's DOM manipulating methods. For example:
$('#my_select').detach().insertAfter('#my_link');
Here is a neat demonstration
(From the example:)
$('a').click(function(event) {
event.preventDefault();
$('#edit').show(500);
});
The base approach is invalid (select inside an a) but I found a solution: Remove the href parameter and you don't need ugly event hacking what does not even work in FF.
(similar problem and its explanation: Select tag inside hyperlink problem)