JQM later prepended flip switch doesn't react on events - javascript

I prepend this code:
<li data-role="fieldcontain">
<label for="test">Test</label>
<select class="marktplaatsenSwitch" id="test" data-role="slider" name="test">
<option value="off">OFF</option>
<option '+selected+'value="on">ON</option>
</select>
</li>
Inside of an ul with the id "settings"
And when I call this
$( ".marktplaatsenSwitch" ).on( "change", function(event, ui) {
alert("Test");
});
It does not react on it. But it does work when I have the li already inside the ul. Do I need to do some kind of refresh? I already tried listview("refresh") and selectMenu("refresh", true)

Dont use:
$( ".marktplaatsenSwitch" ).on( "change", function(event, ui) {
alert("Test");
});
correct jQuery syntax is (if you want to access dynamically created event):
$(document).on( "change", ".marktplaatsenSwitch",function(event, ui) {
alert("Test");
});
This way of event binding is called delegated binding, it doesnt card if element exist or don't exist inside the DOM.

Related

Mozilla stop parent anchor tag behaviour

I have html code.
In Html parent element is Anchor tag and Child element is Dropdown.
I want to stop parent behavious.
Exa. When user click on dropdown so call dropdown change event and stop parent anchor tag behavious like onclick or href value
You can Edit in below url
https://jsfiddle.net/z4c4gwxa/
You need to stop propagation on your dropdown's change event to prevent it from bubbling up the DOM tree, and check the e.target on your anchor tag's click event to ensure it was fired by itself.
e.stopPropagation
$( function () {
$( "a" ).click( function ( e ) {
if ( ! $( e.target ).is( $( this ) ) ) {
return false;
}
alert( 'parent' );
} );
$( '#dropdown' ).change( function ( e ) {
e.stopPropagation();
alert($(this).val());
} )
} )
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<a href="javascript:void(0);">
<select id="dropdown">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
Click this part
</a>
JSfiddle

W2UI: Click and other events of content loaded inside panels are not working

I'm using w2ui 1.5-rc1 layout components.
Attaching an event handler to an element inside a panel won't trigger the action:
<script>
$(function() {
$('#layout').w2layout({
name: 'mainArea',
panels: [
{ type: 'left', size: 200, resizable: true, style: panels, content: 'left' },
{ type: 'main', style: main, content: 'main' }
]
});
w2ui['mainArea'].content('main', $("#list-panel").html());
$("#mylist li a").click(function() {
alert( "Handler for .click() called." );
});
})
</script>
<div id="layout"></div>
<div id="list-panel" style="visibility: hidden" >
<ul id="mylist" class="list-group">
<li><span>Adele</span></li>
<li><span>Bella</span></li>
<li><span>Carl</span></li>
</ul>
</div>
Clicking on the items Bella or Carl will never trigger the alert.
If I remove the w2ui layout then everything works.
<script>
$(function() {
$("#mylist li a").click(function() {
alert( "Handler for .click() called." );
});
})
</script>
<div id="list-panel" >
<ul id="mylist" class="list-group">
<li><span>Adele</span></li>
<li><span>Bella</span></li>
<li><span>Carl</span></li>
</ul>
</div>
I noticed that the same happens when I try to add bootstrap components or any other content inside a panel. The click, change and other events on those components are never triggered.
Any idea why?
As recommended by other users in w2ui github repository, attaching the events to the document element will work.
$(document).on("click", "#mylist li a", function() {
alert( "Handler for .click() called" );
});

In Html Click On list (li) item not working with jquery

I am new to Html,jQuery coding.I want to change background color of item selected(clicked) of an li.
I have my code below :
#In HTML#
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong>
<ul>
<li style="list-style: none; display:inline;padding-left:5px;" class="text-primary" ng-click="GetProducts(x.code)" ng-repeat="x in Major">{{x.code}}</li>
</ul>
</div>
# In controller#
$('#major li').click(function () {
$('li').removeClass('text-primary.selected');
$(this).addClass('text-primary.selected');
});
What am I doing wrong ? When I click on li item, It doesn't call that function.
IF I use this dynamic list it doesn't hit that function but if I use static list it does hit that function.How should I implement click function for dynamic list?
When I click on li item, It doesn't call that function.
Are you sure JQuery is loaded properly?
Are you sure, you're not setting another click event for your list items?
Is your CSS defined correctly?
Anyway, this works for me:
$(document).ready(function () {
$('#major li').click(function () {
$('li').removeClass('selected');
$(this).addClass('selected');
console.log("HERE");
});
});
.selected{
background: #FF00FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong>
<ul>
<li>XXXXX</li>
<li>YYYY</li>
</ul>
</div>
The click event is triggered (check with console.log function) but the action you execute are not defined properly.
$('li').removeClass('text-primary.selected');
$(this).addClass('text-primary.selected');
should be
$('li').removeClass('selected');
$(this).addClass('selected');
If your list is dynamically generated (not in the DOM on page load), the problem may come from the click function. In this case, just use :
$(document).on('click', '#major li', function () {
$('li').removeClass('selected');
$(this).addClass('selected');
});
where you can replace document by the container of your list. Per example :
$('#major').on('click', 'li', function () {
$('li').removeClass('selected');
$(this).addClass('selected');
});
Here is a JSfiddle with working example: https://jsfiddle.net/ztvdnh86/2/
Try this:
# In controller#
$('#major li').click(function () {
$('li.selected').removeClass('text-primary selected');
$(this).addClass('text-primary selected');
});
what you've written 'text-primary.selected' tries to select the element with the tag-name text-primary with the class .selected
what you want to do is to remove the selected class from all the lis with the class text-primary and then add the class selected to the clicked (selected) element:
$('#major li').click(function () {
$('li.text-primary.selected').removeClass('selected');
$(this).addClass('selected');
});

Hide the unchecked radio button

I want to make the unchecked radio buttons hide, and just display the checked one:
<ul class="woof_list woof_list_radio">
<li >
<input type="radio" id="woof_72_55cb07a61800a" class="woof_radio_term" data-slug="elektronik" name="product_cat" value="72">
<label for="woof_72_55cb07a61800a">Elektronik <span>(812)</span></label>
</li>
<li >
<input type="radio" id="woof_113_55cb07a741fec" class="woof_radio_term" data-slug="pompa-air" name="product_cat" value="113" checked="checked">
<label for="woof_113_55cb07a741fec" checked="checked" style="font-weight: bold;">Pompa Air <span>(29)</span></label>
</li>
<li >
<input type="radio" id="woof_184_55cb07a7513ac" class="woof_radio_term" data-slug="brand" name="product_cat" value="184">
<label for="woof_184_55cb07a7513ac">Brand <span>(814)</span></label>
</li>
</ul>
Here is my JavaScript:
$(document).ready(function(){
$("ul.woof_list").find("li").each(function(index){
$(this).find('input[checked="checked"]', ".woof_list");
$( this ).click( function( e ) {
e.preventDefault();
// by default, hide all li's
$( 'ul.woof_list li' ).toggle();
$( '.woof_is_closed' ).trigger('click');
// show only the selected li
$( this ).show();
});
console.log($(this).find('input[checked="checked"]', ".woof_list").val());
I got the value of the radio button, but I do not know what should I do then.
Try this
$(document).ready(function () {
$(':radio').on('change', function () {
$(':radio').not($(this)).closest('li').hide();
});
});
https://jsfiddle.net/ds3Lfms7/1/
It will hide all the other li's when you check one
Just in case you want to keep the toggle behavior you had, so clicking the radio again will bring up all options you may want to try that :
$(document).ready(function(){
$("ul.woof_list li input[type='radio']").click( function( e ) {
// hide all li's (or show all)
$( 'ul.woof_list li' ).toggle();
// show only the selected li
$(this).parent().show();
});
});
http://jsfiddle.net/optionsit/pa0Lmwpg/2/
If you asking for hiding only unchecked radio button then Try this
demo
$('input[type=radio]:not(:checked)').hide();
$('li').click( function () {
$('input[type=radio]').show();
$('input[type=radio]:not(:checked)').hide();
});
A combination of #DGS's answer and #Lorenzo's answer. It uses DGS's cleaner form, but has Lorenzo's toggle() feature to allow the user to re-show the items by clicking re-clicking. This is just better UX, allowing the user to correct his choice in case the he made a mistake, initially.
demo here
$(document).ready(function () {
$(':radio').on('click', function () {
$(':radio').not($(this)).closest('li').toggle();
});
});
Where's Lorenzo's answer does not work properly with jQuery Mobile 1.4.2 checked, this answer does.

JQuery - Adding class onto element, and then interacting with that class doesn't work

When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.
see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()
You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});

Categories