selectedsong div has differents links with differents rel=""... and the problems is...
I'm using that:
selectedBtn = $('#selectedsong a');
selectedBtn.click(function()
{
self.selectedsong($(this).attr('rel'));
return false;
});
selectedsong: function(number)
{
$('#selectedsong').html('new content with new links, rel, and more...');
selectedBtn = $('#selectedsong a'); <---- THE PROBLEM IS HERE,
}
The problem is that, in the first click it works properly, but when the #selectedsong content change, selectedBtn = $('#selectedsong a'); don't work properly, because the selectedBtn.click(function() doesn't work :'(
Thank you very much!
Use
$('#selectedsong').on('click','a',function(e)
{
e.preventDefault(); // prevent default behavior of anchor click
self.selectedsong($(this).attr('rel'));
//return false; dont use return false as it does more work than you need
});
selectedsong: function(number)
{
$('#selectedsong').html('new content with new links, rel, and more...');
}
As your HTML content changes you need to use event delegation.
read more on .on()
I think the problem is that you changed the html inside #selectedsong, and that removed your <a> tag from it, and that's what you're trying to do a select on, is the <a> tag inside #selectedsong. Maybe you could try and just select #selectedsong instead of the anchor tag? Or when you change the html, change the html of #selectedsong a.
Related
I set href for some nodes and it works fine but the other nodes opening blank page Is it possible make them without href and don´t open blank page?
I used this to make href :
cy.nodes('[id = "start"]').data('href', 'https://js.cytoscape.org/');
cy.on('tap', 'node', function() {
try {
window.open(this.data('href'));
} catch (e) {
window.location.href = this.data('href');
}
});
Yes, listen for events that come from node[href], this means nodes that have href within their data set.
cy.on('tap', 'node[href]', function() {})
I'm not totally sure about this, but it should work.
If not, just add
if (!this.data('href')) return;
As the first line in your handler.
I'm trying to click on a "More" anchor tag on a website using HtmlUnit in order to expand a list until the more anchor tag does not exist.
page = client.getPage(url);
HtmlAnchor anchor;
while((anchor = page.getFirstByXPath("//a[#class='load-more list']")) != null) {
page = (HtmlPage) anchor.getPage();
}
I've also tried page = anchor.click();
System.out.println(anchor) shows
HtmlAnchor[ a
href="/guideitem/list/?id=g407&requestType=browse&filter=ZmlsdGVyPXMlM2FmcmVlJmxpbWl0PTMw"
class="load-more list" data-hijax="false" ]
I will continue to look into this problem and post what I find here.
I've had a somewhat similar problem, hope this helps.
It "solved itself" after we disabled CSS on the WebClient:
webClient.getOptions().setCssEnabled(false);
My anchor was:
<div class="my-anchors-parent-class"/>
Search
</div>
It had some JQuery attaching the .click() handler to it, who acted based on the 'class' property of my anchor's parent:
$('.my-anchor's-parent-class').each(function () {
$(this).children('a').click(function () {
// if parent has another given class appended, call .myFunction(this)
// else, call other function
});
});
When we reenable the CSS, the .click() is broken again.
So I'm using .load() to load a view into an element - and when I'm done with it I do an .innerHTML = '' to get rid of it.
But if I do it more than once (i.e. close and open the element) - the form is definitely gone in between and reloaded, but when I submit it submits duplicates.
Here is the code:
$('a.comments').click(function(e){
e.preventDefault();
// $('.overlaybackground').addClass('open');
Component.Overlay.toggleOverlay();
$('#commentcontainer').load($(this).attr('href'), function(){
Component.Forms.init(page, {});
});
});
$('.overlaybackground').click(function(e){
if(e.target.className == 'overlaybackground open'){
e.preventDefault();
Component.Overlay.toggleOverlay();
// $('.overlaybackground').remove('*:not(#commentcontainer)');
document.getElementById('commentcontainer').innerHTML = '';
}
});
Not sure of the specific scenario. But if you only want to toggle the visual, simply toggle the CSS property display of the form instead of removing it from the DOM:
display:none<--> display:block
Try the following:
$('#commentcontainer').empty()
So I'm trying to use ajax to put content into a div, and trying to have it change all internal links before it adds the content so that they will use the funciton and load with ajax instead of navigating to another page. My function is supposed to get the data with ajax, change the href and onclick attributes of the link, then put it into the div... However, all it's doing is changing the href and not adding an onclick attribute at all. Here's what I was using so far:
function loadHTML(url, destination) {
$.get(url, function(data){
html = $(data);
$('a', html).each(function(){
if ( $.isUrlInternal( this.href )){
this.onclick = loadHTML(this.href,"forum_frame"); // I've tried using both a string and just putting the function here, neither seem to work.
this.href = "javascript:void(0)";
}
});
$(destination).html(html);
});
};
Also, I'm using jquery-urlinternal. Just thought that was relevant.
You can get the effect you want with less effort by doing this on your destination element ahead of time:
$(destination).on("click", "A", function(e) {
if ($.isUrlInternal(this.href)) {
e.preventDefault();
loadHTML(this.href, "forum_frame");
}
});
Now any <a> that ends up inside the destination container will be handled automatically, even content added in the future by DOM manipulations.
When setting a function to onclick through js it will not show on the markup as an attribute. However in this case it is not working because the function is not being set correctly. Easy approach to make it work,
....
var theHref=this.href;
this.onclick = function(){loadHTML(theHref,"forum_frame");}
....
simple demo http://jsbin.com/culoviro/1/edit
I have this show/hide set up here: http://jsfiddle.net/TwDSx/38/
What I would like to do is have the plus sign go away if the content is showing and vise versa if the content isn't showing hide the minus sign and show the plus.
I read articles on this using images to swap out, but nothing with just using html/css. Also, I would like to keep the javascript out of the html if this is possible, and just call for it externally.
any help is appreciated!
EDIT :
You can attach an event handler on your click to toggle the display attribute of the + or - button
$('#hide,#show').click(function(){
$('#hide,#show').toggle();
})
Quick demo:
http://jsfiddle.net/TwDSx/39/
I modified your Javascript a little and extended it so you can keep it in an external file, you just need to ensure you hide the #show div with CSS if you load the page with the content already showing, or vice-versa for the #hide.
The Javascript is as follows:
$('#show').click(function() {
ShowClick();
});
$('#hide').click(function() {
HideClick();
});
//This Javascript can be external
function ShowClick() {
$('#content').toggle('slow');
$('#hide, #show').toggle();
};
function HideClick() {
$('#content').toggle('fast');
$('#show, #hide').toggle();
};
The Js-Fiddle can be seen here: http://jsfiddle.net/mtAeg/
I think the simplest solution is to have only one button, #toggle, and to change the content of that button like so:
$('#toggle').click(function () {
if (this.innerHTML == '-') {
$('#content').slideUp('fast');
this.innerHTML = '+';
} else {
$('#content').slideDown('slow');
this.innerHTML = '-';
}
});
fiddle