I want to remove the addcontent button once a new div is created.
Then create new divs from the new addcontent button created inside a new div.
<script>
var i = 1;
$(document).ready(function () {
$("#addcontent").click(function () {
var q = "new-question" + String(i);
alert(q);
$(".question").append('<div class="new-question" id="question' + i + '" name="question' + i + '"><b>Div is created</b><br> This is div text <br> <button id="addcontent">Add content</button></div>').show('slow');
i++;
});
});
</script>
<div class="question">
<button id="addcontent">Add content</button>
</div>
try this:
<script>
var i = 1;
$(document).ready(function () {
$(document).on('click','.addcontent',function(){
//$(".addcontent").click(function () {
if(i==1)
$(".question").html('');
var q = "new-question" + String(i);
$(".hide_button").remove();
alert(q);
$(".question").append('<div class="new-question" id="question' + i + '" name="question' + i + '"><b>Div is created</b><br> This is div text <br> <button class="addcontent hide_button">Add content</button></div>').show('slow');
i++;
});
});
</script>
<div class="question">
<button class="addcontent hide_button">Add content</button>
</div>
Just in case you want to have div inside div questions:
var i = 1;
$(document).ready(function () {
$('.question').on('click', 'button#addcontent', function () {
var $parent = $(this).parent();
$(this).remove();
var q = "new-question" + String(i);
alert(q);
$parent.append('<div class="new-question" id="question' + i + '" name="question' + i + '"><b>Div is created</b><br> This is div text <br> <button id="addcontent">Add content</button></div>').show('slow');
i++;
});
});
See demo
Related
I want to create a new button every time the post button is clicked and each new button should have its own counter. This works in JSFiddle but not when I use it.
$(function() {
$('.input_button').on('click', function() {
text = $('.input_text').val();
var btn = $("<button></button>");
btn.text("Like!");
$("body").append(btn);
btn.after("<span class='clicks'></span>")
var clicks = 0;
btn.click(function() {
clicks++;
$(this).next(".clicks").html(clicks);
});
if (text != undefined) {
post = '<div class="post test--post">' + '<img src="photo.JPG" width="20" height="25" alt=""/>' + '<p><span>jaleelg: </span></p>' + text +
'<p>Clicks: <a id="clicks">0</a></p>' + "<br>" + Date() + " " + '</div>';
new_post = $('.post_feed').append($(post))
new_post = $('.post_feed').append($(btn))
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<h3 id="feed">My Posts</h3>
<section class="post_feed test--post_feed">
</section>
</section>
<input class="input_text test--input_text" type="text">
<button type="submit" class="input_button test--input_button">Post</button>
<div id="clicks">
</div>
You have to change in this:
btn.click(function() {
clicks++;
$(this).next(".clicks").html(clicks);
});
Like this:
btn.click(function() {
$('.clicks').html(function(i, val) { return val*1+1 });
});
This pen works:
http://codepen.io/anon/pen/ygRxOq?editors=0010
$(function() {
$("body").on("click",".like",function(e) {
clicks = $(e.target.parentElement).find("#clicks").text() / 1 + 1;
$(e.target.parentElement).find("#clicks").text(clicks);
});
$('.input_button').on('click', function() {
text = $('.input_text').val();
post = '<div class="post test--post">' +
'<img src="photo.JPG" width="20" height="25" alt=""/>' +
'<p><span>jaleelg: </span></p>' + text +
'<p>Clicks: <a id="clicks">0</a></p>' +
'<br>' + Date() + '<br>'+
'<button class="like">Like!</button>'+
'</div>';
new_post = $('.post_feed').append($(post));
});
});
I have two textareas with different ids which both have wysiwyg buttons for text formatting. I can insert the formatting tags into the first textarea however when I try to insert tags into the second textarea, the tags are inserted into the first one. Obviously when I use the buttons assigned to their respective textarea I would like the format tags to be inserted in the appropriate textarea. In jQuery I try to store the id of the buttons to concatenated with '#textarea' to recreate the textarea id.
<button class="B" id="11">B</button>
<button class="I" id="11">I</button>
<button class="U" id="11">U</button>
<button class="S" id="11">S</button>
<div id="textarea1" class="textareaWrapper">
<textarea id="textarea11" class="textarea"></textarea>
</div>
<button class="B" id="22">B</button>
<button class="I" id="22">I</button>
<button class="U" id="22">U</button>
<button class="S" id="22">S</button>
<div id="textarea2" class="textareaWrapper">
<textarea id="textarea22" class="textarea"></textarea>
</div>
<script>
$(document).ready(function () {
$('button.B').click(function () {
var id = $('button.B').attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + id);
})
$('button.I').click(function () {
var id = $('button.I').attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<i></i>");
})
$('button.U').click(function () {
var id = $('button.U').attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<u></u>");
})
$('button.S').click(function () {
var id = $('button.S').attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<s></s>");
})
})
</script>
The problem is that inside your click handler you're getting a ref to the first button's id.
try this: $(this).attr('id');
Like:
$(document).ready(function () {
$('button.B').click(function () {
var id = $(this).attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + id);
})
$('button.I').click(function () {
var id = $(this).attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<i></i>");
})
$('button.U').click(function () {
var id = $(this).attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<u></u>");
})
$('button.S').click(function () {
var id = $(this).attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<s></s>");
})
})
You must not use same ids for multiple controls.
My suggestion is to use dummy attribute e.g.'data-group', which can be used in JavaScript and browser simply ignores it. Like:
<button class="B" data-group="1">B</button>
<button class="I" data-group="1">I</button>
<button class="U" data-group="1">U</button>
<button class="S" data-group="1">S</button>
<div id="textarea1" class="textareaWrapper">
<textarea id="textarea11" class="textarea"></textarea>
</div>
<button class="B" data-group="2">B</button>
<button class="I" data-group="2">I</button>
<button class="U" data-group="2">U</button>
<button class="S" data-group="2">S</button>
<div id="textarea2" class="textareaWrapper">
<textarea id="textarea22" class="textarea"></textarea>
</div>
<script>
$(document).ready(function () {
$('button.B').click(function () {
var grp = $('button.B').attr('data-group');
$('#textarea' + grp).val($('#textarea' + grp).val() + id);
})
$('button.I').click(function () {
var grp = $('button.I').attr('data-group');
$('#textarea' + grp).val($('#textarea' + grp).val() + "<i></i>");
})
$('button.U').click(function () {
var grp = $('button.U').attr('data-group');
$('#textarea' + grp).val($('#textarea' + grp).val() + "<u></u>");
})
$('button.S').click(function () {
var grp = $('button.S').attr('data-group');
$('#textarea' + grp).val($('#textarea' + grp).val() + "<s></s>");
})
})
</script>
Hope it works.
The problem is the way you retrieve your ids:
$('button.S').attr('id');
This will get the id of the first element passing the selector. Consider this JSFiddle.
I use getJSON function in jQuery and append the retrieved result in the form of button in the DOM. however I cannot use the selector on the appended DOM.
here is my script:
$.getJSON("http://example.com/checkDiary.php?babyID=" + localStorage.getItem("babyRegNo"), function(data) {
if (data.indexOf("noDiary") > -1) {
document.getElementById("diaryList").innerHTML = "<p>Your baby currently has no diary entry.</p>";
} else {
var appendedText = '';
$.each(data, function(){
var diaryID = this.diary_id;
var dateAdded = this.date;
appendedText = appendedText + '<p><button type="button" class="diaries" value ="' + diaryID + '">' + dateAdded + '</button></p>';
})
document.getElementById("diaryList").innerHTML = appendedText;
}
})
this is what i use to select:
$(':button.diaries').click(function(){});
but it seems not working. however when I put a dummy button with the same class in the HTML body, it is selected perfectly. Can you guys give me any suggestion?
#Kelvin Aliyanto ....So the solution will be like this
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(function(){
$.getJSON("http://example.com/checkDiary.php?babyID=" + localStorage.getItem("babyRegNo"), function(data) {
if (data.indexOf("noDiary") > -1) {
document.getElementById("diaryList").innerHTML = "<p>Your baby currently has no diary entry.</p>";
} else {
var appendedText = '';
$.each(data, function(){
var diaryID = this.diary_id;
var dateAdded = this.date;
appendedText = appendedText + '<p><button type="button" class="diaries" value ="' + diaryID + '">' + dateAdded + '</button></p>';
})
document.getElementById("diaryList").innerHTML = appendedText;
}
});
$('div').on('click', '.diaries', function(event){
alert("Hi");
}) ;
});
</script>
<div id="diaryList"></div>
check your code is after document ready
$(document).ready(function(){ //your code here });
and use
$('button.diaries').on(click , function(){})
instead of .click
i have writed this code but not work, can you help me?
Aggiungi<br>
<script>
var i=0;
if (i<=10){
var count = 0;
$(function(){
$('#add').click(function(){
count += 1;
//alert(i);
$('#container').append('<input id="url_' + count + '" name="url_' + count + '" type="input" value="http://" size="35" />' );
i++; });
});
}
</script>
<div id="container"></div>
I think you want restrict only 10 input container .
Try this
Aggiungi<br>
<script>
var i = 0;
var count = 0;
$(function () {
$('#add').click(function () {
if ($('*[id^=url]').length < 10) {
$('#container').append('<input id="url_' + count + '" name="url_' + count + '" type="input" value="http://" size="35" /><br>');
i++;
}
});
});
</script>
Please, advice.
I want to add tags inside the container marking checkboxes and remove tags by clicking on the "x" button of each tag.
Everything works fine except that when you click on the "x" button and tags are removed the state of the checkbox remains checked.
But I need that when you click on the button of each tag the state of the checkbox must be unchecked.
It might be easier to do with the value and the name of input, but I can't use them - only id.
$(document).ready(function() {
var $list = $("#itemList");
$(".chkbox").change(function() {
var a = $('label[for="' + this.id + '"]').text();
if (this.checked) {
$list.append('<li>'+a+'<button class="closebutton" value="'+a+'">X</button></li>');
}
else {
$("#itemList li:contains('"+a+"')").remove();
}
})
$(document).on('click','.closebutton',function(){
var b = this.value;
$("#itemList li:contains('"+b+"')").remove();
$('label[for="' + this.id + '"]').removeAttr('checked');
});
});
<div id="items">
<ul id="itemList">
</ul>
</div>
<div id="tab1" class="tab-pane">
<div id="ck-button"><label for="one"><input type="checkbox" id="one" class="chkbox"><span>First book</span></label> </div>
<div id="ck-button"><label for="two"><input type="checkbox" class="chkbox" id="two"><span> Second book</span></label> </div>
</div>
Try
$(document).ready(function () {
var $list = $("#itemList");
$(".chkbox").change(function () {
var a = $(this).next().text();
if (this.checked) {
$('<li>' + a + '<button class="closebutton" value="' + a + '">X</button></li>').appendTo($list).data('src', this);
} else {
$("#itemList li:contains('" + a + "')").remove();
}
})
$(document).on('click', '.closebutton', function () {
var $li = $(this).closest('li');
$($li.data('src')).prop('checked', false);
$li.remove();
});
});
Demo: Fiddle
Try this:
<div id="items">
<ul id="itemList">
</ul>
</div>
<div id="tab1" class="tab-pane">
<div id="ck-button1"><label for="one"><input type="checkbox" id="one" class="chkbox"><span>First book</span></label>
</div>
<div id="ck-button2">
<label for="two"><input type="checkbox" class="chkbox" id="two"><span> Second book</span></label></div>
</div>
</body>
<script>
$(document).ready(function()
{
var $list = $("#itemList");
$(".chkbox").change(function()
{
var a = $('label[for="'+this.id+'"]').text();
var t = this.id;
if(this.checked)
{
$list.append('<li>'+a+'<button class="closebutton" title="'+t+'" value="'+a+'">X</button></li>');
}
else
{
$("#itemList li:contains('"+a+"')").remove();
}
})
$(document).on('click', '.closebutton', function()
{
var b = this.value;
var q = this;
$("#itemList li:contains('"+b+"')").remove();
$('#'+this.title).removeAttr('checked');
});
});
</script>
Or See this demo: http://jsfiddle.net/knYvf/
API used:
find: http://api.jquery.com/find/
contains: http://api.jquery.com/contains-selector/
This line should do the trick:
$('label:contains("' + b + '")').find('.chkbox').prop('checked', false);
+1 to you for neat question as well!
Hope any will suffice the need :)
Code
$(document).ready(function () {
var $list = $("#itemList");
$(".chkbox").change(function () {
var a = $('label[for="' + this.id + '"]').text();
if (this.checked) {
$list.append('<li>' + a + '<button class="closebutton" value="' + a + '">X</button></li>');
} else {
$("#itemList li:contains('" + a + "')").remove();
}
})
$(document).on('click', '.closebutton', function () {
var b = this.value;
$("#itemList li:contains('" + b + "')").remove();
$('label:contains("' + b + '")').find('.chkbox').prop('checked', false);
});
});
<div id="items">
<ul id="itemList"></ul>
</div>
<div id="tab1" class="tab-pane">
<div id="ck-button">
<!--html code should be like this no need to add span-->
<input type="checkbox" id="one" class="chkbox"/>
<label for="one">First book</label>
</div>
<div id="ck-button">
<input type="checkbox" class="chkbox" id="two" />
<label for="two"> Second book</label>
</div>
var $list = $("#itemList");
$(".chkbox").change(function () {
var a = $('label[for="' + this.id + '"]').text();
var name=$(this).attr('id');
if (this.checked) {
//add name attribute in the button with the id of checkbox
$list.append('<li>' + a + '
<button class="closebutton" value="' + a + '" name="'+name+'">X</button></li>');
} else {
$("#itemList li:contains('" + a + "')").remove();
}
})
$(document).on('click', '.closebutton', function () {
var b = this.value;
$("#itemList li:contains('" + b + "')").remove();
//remove the checkbox whose id is same as the name attribute of button
$(':checkbox[id="' + this.name + '"]').removeAttr('checked');
});
DEMO