When I initialize bootstrap-wysihtml5 with class name it will only initialize first one and rest of the remain normal text-area
Is there any way to handle it
<script>
$(document).ready(function() {
$('.vid_description').wysihtml5();
});
</script>
I guess, the method wysihtml5() is only called for the first element.
Iterate over all elements and call the initialization method for each element separately:
$('.vid_description').each(function() {
$(this).wysihtml5();
});
Related
I am trying to get a class to be added to a div element when clicked. I can not get it to work, I have it set up similar to this:
javascript:
function choose() {
this.addClass("selected");
}
html:
<div class="initialclass" onclick="choose()">CLICK</div>
I have other javascript commands in that function that are working properly I just can't get the class to add.
You have two issues with your current code. First is that this in your JS function refers to the window, not the element that was clicked. Second if it did refer to that element, it would be a DOMElement, not a jQuery object, so it would not have the addClass() method - you need to convert it to a jQuery object. Try this:
<div class="initialclass" onclick="choose(this)">CLICK</div>
function choose(el) {
$(el).addClass("selected");
}
Note however, that it is better practice to hook up your events using JavaScript. As you are using jQuery, you can do this:
<div class="initialclass">CLICK</div>
$(function() {
$('.initialclass').click(function() {
$(this).addClass("selected");
});
});
change your html like this:-
<div class="initialclass" onclick="choose(this)">CLICK</div>
and function:-
function choose(dv) {
$(dv).addClass("selected");
}
Use classList:
classList returns a token list of the class attribute of the element.
el.classList.add("selected");
classList.add:
Adds a class to an element's list of classes. If class already exists in the element's list of classes, it will not add the class again.
CODE
HTML:
<div class="initialclass" onclick="choose(this)">CLICK</div>
Javascript:
function choose(el) {
el.classList.add("selected");
}
DEMO
If you use jquery add this is code in your $(document).ready()
$(".initialclass").click(function(){
$(this).addClass("selected");
});
I have to add a list of checkboxes dynamically. I then need to know which one performed the click, then ask if it's checked or not.
I have this code:
$('#MyContainerOfChecksDiv').click( '.MySelectorClass', function(){
if ("MyCheckClicked".is(':checked'))
{
//...here i need to use the label and id
}
else{...}
})
using "$(this)" i get the "MyDiv", obviously using $(this).find('input:checkbox') I get the whole list of checks.
I have to get this checkbox because I need to use its properties.
Add a formal parameter to click handler and use it like this
$('#myDiv').click('.MySelectorClass', function (e) {
if ($(e.target).is(':checked')) {
alert(e.target.id);
}
})
fiddle
Also it's not quite clear to me how you distinguish dynamically added elements and static. Do you have different class for them? If so then you dynamic and static elements can have different handlers and this will be the way to tell whether it was created dynamically
To delegate to dynamic elements you have to use .on(). The element that you clicked on will be in this.
$("#myDiv").on("click", ".MySelectorClass", function() {
if (this.clicked) {
// here you can use this.id
} else {
// ...
}
});
You can't use .click() to delegate like you tried. You're just binding the click handler to the DIV, and the string ".MySelectorClass" is being passed as additional data to the handler.
I want to append this to my document:
$('#myDiv).append("<div id='myDiv2' onclick="+extElementConfig.onClickDo+">Do</div>");
The snippet above has it's onClick populated by a certain object with properties,
this:
var extElementConfig={onClickDo:sampleFunc()};
Unfortunately declaring a function into the object property also fires it, as was expected.
How can I achieve the above functionality without triggering the
sampleFunc()?
I just need to dynamically populate the onClick event through an object property.
Assuming you have control over the extElementConfig object, remove the parenthesis from sampleFunc
var extElementConfig={extElementPosition :10,extElementId:'mailOrderBtn',onClickDo:sampleFunc};
As Rob. M. pointed out the real problem with your code was the fact you were running the code when it was in the object instead of assigning a reference. And when you tried to assigning the onclick, that had issues too since you are trying to use a function reference when it was a string.
To get your code to run, it would be something like
function sampleFunc () {
alert("clicked");
}
var extElementConfig={onClickDo:"sampleFunc()"};
$('#myDiv').append("<div id='myDiv2' onclick='"+extElementConfig.onClickDo+"()'>Do</div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv"></div>
To get rid of this, do not use the sting method to build up the element, instead leverage the power of jQuery. Below is an example where I build a div and pass in some arguments to change the element's text and css when clicked.
function sampleFunc(txt, css) {
$(this).text(txt).css(css);
}
var extElementConfig = {
onClickDo: sampleFunc,
onClickArgs : ["Clicked", {"background-color":"green"}]
};
$('<div/>', {
id: 'myDiv2',
text: 'Do!'
}
).on("click",
function() {
extElementConfig.onClickDo.apply(this, extElementConfig.onClickArgs);
}
).appendTo("#myDiv");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="myDiv"></div>
I have a dynamically generated table of records and for each row, I have an anchor tag with class name set to 'hdelete' to enable me invoke delete method on the particular row's link that is clicked. I have some code currently that is support to hook up all the anchors with class ='hdelete'
$("#tbl_srecords").click(function (e) {
$(e.target).hasClass("hdelete") ? fnDeletehrecord($(e.target)) : null; //Run the delte row function here
});
The code above does not seem to work. what it currently does is select just the first occurence of anchor with class='hdelete'. Anyone with a better idea on how to best implement this?
I have a dynamically generated table
$("#tbl_srecords a.hdelete").live('click', function (e) {
fnDeletehrecord($(this)); // pass the element as a parameter to the function
});
live is Deprecated
This is latest (recommended)
$("#tbl_srecords").on('click', 'a.hdelete', function (e) {
fnDeletehrecord($(this)); // pass the element as a parameter to the function
});
because of dynamic content.
This will bind a function to all anchor tags with class hdelete and call the fnDeletehrecord function with the element as a jquery object past as a parameter.
$("#tbl_srecords a.hdelete").click(function(){
//NOTE: This represents the anchor tag that fired the event
fnDeletehrecord($(this));
});
This should work:
$("#tbl_srecords a.hdelete").click(fnDeletehrecord);
This code will handle click events on the links with class hdelete within element with id tbl_srecords.
I'm new to javascript and JQuery, and I'm working in a small project with JSP.
I create a grid dynamically with JSP and I added some buttons wich class is "select" and in the alt attribute I set the current row index. That works perfectly, I'm trying to set the onclick dynamically. This is my code
$('.select').click(function (){
alert($('.select').attr('alt'));
}
I want to each button to show its own index, but that code shows just the first index in each button. I've searched how to do it, but nothing comes out.
Is there a chance to do what I want?
change this line as:
alert($(this).attr('alt'));
When jQuery calls your event handler it sets this to be the DOM element in question, so try this:
$('.select').click(function (){
alert($(this).attr('alt'));
});
If you need to access DOM element properties you can then get them directly, e.g.:
alert( this.id );
this.value = "test";
If you need to use jQuery methods on the element you need to pass it to the jQuery function first, e.g.:
$(this).hide();
$(this).css("color","red").slideDown();
$('.select').click(function (){
alert($(this).attr('alt'));
});
Change
alert($('.select').attr('alt'));
by
alert($(this).attr('alt'));
Now you select the attr alt of the button lauch the event.
Not sure if that's what you're looking for but...
$('.select').click(function() {
$('.select').each(function() {
$(this).attr('value', $(this).attr('alt'));
});
});
This'll have every button "show" the value stored within their alt attribute when you click one button.
By the way, if you're using 1 button per row, you'd probably better go with index().