I want to replace content in a web page with content from clicked elements and made the following JQuery:
function clickHandler(id) {
$("#title").html(id.innerText);
}
$("#navigation a[href]").bind("click", this.id, clickHandler);
The only thing that doesn't work is the replacing part. The content is there in the innerText property of the "id" object, but how do I access it? I've tried about every syntax I could think of: id->innerText, id[innerText], id['innerText'], id.innerText and id(╯°□°)╯︵ ┻━┻innerText(╯°□°)╯︵ ┻━┻.
this inside the click handler refers to the clicked element, so you can just get its text using .text()
function clickHandler() {
$("#title").html($(this).text());
}
$("#navigation a[href]").bind("click", clickHandler);
You can use this:
$("#navigation a[href]").on("click", function(){
var linkText = $(this).text();
$("#title").html(linkText);
});
(╯°□°)╯︵ ┻━┻
function clickHandler(event) {
console.log(event.data);
$("#title").html(($("#" + event.data.id).text()));
}
var $obj = $("#navigation a[href]");
$obj.bind("click", {'id': $obj.attr("id")}, clickHandler);
Fiddle
Related
I want to hide an element which is not a certain class via jQuerys not() :
Content 1
Content 2
<div class="post-item c_1"></div>
<div class="post-item c_2"></div>
and
var thisContent;
jQuery('.content-btn').click(function() {
thisContent = this.id;
jQuery('.post_item').not('.'+thisContent).fadeOut();
}
am I using .not() method wrong in this context, because it seems not to work!
Your selector needs to be
jQuery('.post-item')
And you need to close the ) at the end of your jQuery, like this:
var thisContent;
jQuery('.content-btn').click(function() {
thisContent = this.id;
jQuery('.post-item').not('.'+thisContent).fadeOut();
});
See http://codepen.io/anon/pen/EaNXjg for a working example.
Try using
$(element).hasClass(".clasname").fadeOut();
as #AND Finally noticed modify your selector .. and while you use click on Anchor you need to use e.preventDefault; try this
jQuery('.content-btn').click(function(e) {
e.preventDefault;
thisContent = this.id;
jQuery('.post-item').not('.'+thisContent).fadeOut();
$('.'+thisContent).fadeIn();
});
DEMO
I'm starting with jquery, and have an issue here:
http://jsfiddle.net/8guzD/
$('#test.off').click(function(){
$(this).removeClass('off').addClass('on');
});
$('#test.on').click(function(){
$(this).removeClass('on').addClass('off');
alert('ok');
});
the first part of the code goes well, the class is apply, but when I attach an event in this element with its new class it won't work.
Can someone explain me what is the problem exactly?
I tried with javascript,
http://jsfiddle.net/R5NRz/
var element = document.getElementById('test');
element.addEventListener('click', function() {
this.id ='test2';
alert("ok");
}, false);
var element2 = document.getElementById('test2');
element2.addEventListener('click', function() {
alert("ok2");
}, false);
and it didn't really help me, having the same issue
try
$(document).on("click",'#test.on',function(){
$(this).removeClass('off').addClass('on');
alert('ok');
});
$(document).on("click",'#test.off',function(){
$(this).removeClass('off').addClass('on');
alert('ok passs');
});
Demo
In your jQuery example you are binding to DOM elements that exist at that time. That is why you see the first fire but not the second. It is not a match for your '#test.on' selector when the code is run. What you want to do instead is use delegation:
$('#test').on('click',function() {
var ele = $(this);
if (ele.hasClass('on')) {
ele.removeClass('on').addClass('off');
} else {
ele.removeClass('off').addClass('on');
}
});
This assumes that you are doing more than just toggling classes. If you want simply toggle classes then an easier solution is to pick one as the default and use the other as a flag. For example, .on is on but without .on it's off. Then you can just use toggle:
$('#test').on('click', function() {
$(this).toggleClass('on');
});
$("#test.on")
Doesn't bind to anything. Try this:
$('#test').click(function() {
if($(this)).hasClass('off') $(this).removeClass('off').addClass('on');
else $(this).removeClass('on').addClass('off');
});
You might consider using an 'active' class instead and just toggling that, instead of have two separate on/off classes. Then you can write:
$("#test").click(function() {
$(this).toggleClass('active');
});
I have more similar elements in HTML which are being added continously with PHP. my question is the following:
With jQuery, I would like to add a click event to each of these <div> elements. When any of them is being clicked it should display it's content. The problem is that I guess I need to use classes to specify which elements can be clickable. But in this case the application will not be able to decide which specific element is being clicked, right?
HTML:
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
jQuery try:
$("test").on("click", function()
{
var data = ???
alert(data);
});
UPDATE - QUESTION 2:
What happens if I'm placing <a> tags between those divs, and I want to get their href value when the DIV is being clicked?
I always get an error when I try that with this.
this refers to the element triggering the event. Note that it is a regular js element, so you'll need to convert it to a jQuery object before you can use jQuery functions: $(this)
$(".test").on("click", function()
{
var data = $(this).text();
alert(data);
});
Like this:
$(".test").on("click", function(event)
{
var data = $(event.target);
alert(data.text());
});
this variable contains the reference of current item
$(document).ready(function() {
$(".test").click(function(event) {
var data = $(this).text();
alert(data);
});
})
;
The class selector in jquery is $(".ClassName") and to access the value, use $(this) as such:
$(".test").on("click", function(){
var data = $(this).text();
alert(data);
});
You can use this inside the function which mean clicked div
DEMO
$(".test").on("click", function () {
alert($(this).html());
});
I am developing an application using JQuery. This is a fragment of the HTML code I am using:
<MarkNag class="altcheckboxoff" id="markable_38" Azpimark_id="100038">helburua </MarkNag>
<MarkNag class="altcheckboxoff" id="markable_2" Azpimark_id="100002">Oriolek </MarkNag>
<MarkNag class="altcheckboxoff" id="markable_39" Azpimark_id="100039">gas liberalizazioa </MarkNag>
I have the next JQuery script in the HTML page:
<script type='text/javascript'>
$("MarkNag").click(function (){
$(this).toggleClass("highlight");
});
</script>
I would like to know how could I store "markable_39" in a variable if this MarkNag tag was clicked. I guess I should use .data(). But I dont really know how. Any ideas? Thanks
Do it like this
$("MarkNag").click(function ()
{
$(this).toggleClass("highlight");
var IdOfTag = this.id;
//or
IdOfTag = $(this).attr('id');
});
Also, you can just use this.id,
like:
var id = this.id;
Actually, the correct code would be $(this).attr("id").
$("MarkNag").click(function (){
$(this).toggleClass("highlight");
alert(this.id); // Method 1: this.id
alert($(this).attr('id')); // Method 2: $(this).attr('id')
});
here u will get object from where the event occurs
var eventobject = arguments.callee.caller.arguments[0];
here u can access any attribute of currentTarget (in this case id)
var id = $(eventobject.currentTarget).attr("id");
I have this simple HTML code:
<div id="new_gallery">
<p id="add_gallery">Add new gallery</p>
</div>
and jQuery code:
<script>
$("#add_gallery").click(function() {
$("#new_gallery").append('<input name"new_gallery" />Add');
$(this).remove();
});
$("#create_new_gallery").on('click', function(){
alert('1');
});
</script>
First function is working, but second one is not. I need to create new input element, send data via ajax, and then delete the input element and append a p element once again. How can I do this?
When the second statement runs, the element #create_new_gallery does not exist yet so it does nothing.
You can do the binding to the click event after you created the element for instance, this ensures the element exists in the DOM:
$("#add_gallery").click(function() {
$("#new_gallery").append('<input name="new_gallery" />Add');
$(this).remove();
$("#create_new_gallery").on('click', function() {
alert('1');
});
});
DEMO
Here is a little bit more optimized version. It's a bit non-sense to append an element and have to re-query for it (event though querying by id is the fastest method. Besides, it's best to use the chaining capabilities of jQuery afterall:
$("#add_gallery").click(function() {
var $gallery = $("#new_gallery");
$('<input name="new_gallery" />').appendTo($gallery);
$('Add')
.on('click', function() {
alert('1');
})
.appendTo($gallery);
$(this).remove();
});
DEMO
#create_new_gallery doesn't exist when you bind its click event.
Here is what your code should look like:
$("#add_gallery").click(function() {
var newG = $("#new_gallery");
$('<input name"new_gallery" />').appendTo(newG);
$('Add').appendTo(newG).on('click',
function() {
alert('1');
});
$(this).remove();
});
Notice that getting $("#new_gallery") into a variable avoid to look for it twice.
$(document).ready(function () {
$("#add_gallery").click(function() {
$("#new_gallery").append('<input name"new_gallery" />Add');
$(this).remove();
$("#create_new_gallery").on('click', function(){
alert('1');
});
});
});
DEMO: http://jsfiddle.net/39E4s/2/
Try live to handle the events fired for elements added after the page has loaded.
$("#create_new_gallery").live('click', function(){
alert('1');
});
http://api.jquery.com/live/