javascript - If hasClass condition jquery not working properly -


i trying execute alerts onclick events , conditions jquery statement. seems event handlers don't work properly, due fact missing in event handling logic. have 1 button, id #bottone1, , have menu buttons id #b1 , #b2.

the first event works fine, adds correctly class "cliccatoinvoca1_onready". when click on #bottone1 starts the first alert "cliccatoinvoca1_onready". onclick event $("#b1") works properly, removes class "cliccatoinvoca1_onready" , replaces class "cliccatoinvoca1".

this point encounter first problem

when click on #bottone1 comes first alert "cliccatoinvoca1_onready", , "cliccatoinvoca1". when click on #b2 , afer click on #bottone1 executes 3 alerts, "cliccatoinvoca1_onready", "cliccatoinvoca1" , "cliccatoinvoca3".

so, main problem doesn't work if condition execute 1 alert @ time. when click on #bottone1 executes alerts in sequence.

this document.ready function

$(document).ready(function () {     $("#select-1").multiselect();     invoca1();     $("#bottone1").addclass("cliccatoinvoca1_onready btn btn-default");     if ($("#bottone1").hasclass("cliccatoinvoca1_onready")) {         $("#bottone1").click(function () {             alert("cliccatoinvoca1_onready");             keys = [];             $('input[name="multiselect_select-1"]:checked').each(function () {                 keys.push(this.value);             });         });     }      $("#b1").click(function () {         invoca1();         $("#bottone1").removeclass("cliccatoinvoca1_onready noclass").addclass("cliccatoinvoca1");         if ($("#bottone1").hasclass("cliccatoinvoca1")) {             $("#bottone1").click(function () {                 alert("cliccatoinvoca1");                 keys = [];                 $('input[name="multiselect_select-1"]:checked').each(function () {                     keys.push(this.value);                 });             });         }     });      $("#b2").click(function () {         invoca3();         $("#bottone1").removeclass("cliccatoinvoca1").addclass("cliccatoinvoca3");         if ($("#bottone1").hasclass("cliccatoinvoca3")) {             $("#bottone1").click(function () {                 alert("cliccatoinvoca3");                 keys = [];                 $('input[name="multiselect_select-1"]:checked').each(function () {                     keys.push(this.value);                 });             });         }     }); });

change use delegated event handlers, attached non-changing ancestor element, each matching selector:

e.g. this:

$(document).on('click', "#bottone1.cliccatoinvoca1_onready", function() {     alert("cliccatoinvoca1_onready");     keys = [];     $('input[name="multiselect_select-1"]:checked').each(function () {          keys.push(this.value);     }); });

the above need 1 click handler, repeat pattern other classes can have. never need hasclass checks.

your other code becomes simple this:

$("#b1").click(function () {      invoca1();      $("#bottone1").removeclass("cliccatoinvoca1_onready noclass").addclass("cliccatoinvoca1");  });

delegated handlers:

  • delegated event handlers work listening event (in case click) bubble ancestor element.
  • you choose closest non-changing ancestor element, document default if nothing else closer/convenient. not use 'body' has bug related styling can cause mouse events not bubble it.
  • then applies jquery selector elements in bubble-chain.
  • it then applies function, matching elements that caused event.
  • the result elements need match @ event time , not event registration time.

this pattern simplify code significantly.

the entire example become this:

$(document).ready(function () {     $("#select-1").multiselect();     invoca1();     $("#bottone1").addclass("cliccatoinvoca1_onready btn btn-default");      $("#b1").click(function () {         invoca1();         $("#bottone1").removeclass("cliccatoinvoca1_onready noclass").addclass("cliccatoinvoca1");     });      $("#b2").click(function () {         invoca3();         $("#bottone1").removeclass("cliccatoinvoca1").addclass("cliccatoinvoca3");     });      $(document).on('click', "#bottone1.cliccatoinvoca1", function () {         alert("cliccatoinvoca1");         keys = [];         $('input[name="multiselect_select-1"]:checked').each(function () {             keys.push(this.value);         });     });      $(document).on('click', "#bottone1.cliccatoinvoca3", function () {         alert("cliccatoinvoca3");         keys = [];         $('input[name="multiselect_select-1"]:checked').each(function () {             keys.push(this.value);         });     }); });

notes:

  • i ignoring fact event handlers contain identical code , assume real code has different operations.

-

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

overview i want replace oracle.dataaccess orcale. managed dataaccess, opening connection latter throws ora-12537 network session end of file exception. exception message / stack trace {oracleinternal.network.networkexception (0x000030f9): ora-12537 : netzwerksession: dateiende @ oracleinternal.network.readerstream.read(orabuf ob) @ oracleinternal.ttc.orabufreader.getdatafromnetwork() @ oracleinternal.ttc.orabufreader.read(boolean bignoredata) @ oracleinternal.ttc.marshallingengine.unmarshalub1(boolean bignoredata) @ oracleinternal.ttc.ttcprotocolnegotiation.readresponse()} i trying connect oracle 11g database , not have client installed on local machine. working test application (unmanaged) using oracle.dataaccess works fine . using system; using oracle.dataaccess.client; namespace app.odp.unmanaged { internal class program { private static void main(string[] args) { //dummy connection string...
Read more

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

i want compress , decompress ecg signal stored text message text file , find out file size, cr,prd ratio,and qs. here code compression , decompression of ecg signal using huffman algorithm. i'm trying find out file size, compression ratio,prd ratio,qs. but error i'm getting the ecg file in text format. %clearing variables , screen enter code here clear all; close all; clc; [file1]=uigetfile('*.txt'); %fprintf('enter ecg file name :%s',file1); p=file1; t=sprintf('%s',p); b1=dlmread([file1]); len=length(b1); lead=input('enter lead number :'); %lead=str2double(lead); col2=b1(1:end,lead); e=fix(sqrt(len)); m=1; i=1:e j=1:e g2(i,j)=fix(col2(m)*1000); %amplifying 1000 m=m+1; end end g3=g2; i=1:e j=1:e ...
Read more

utf 8 - split utf-8 string into bytes in python -

i trying split utf-8 string bytes in python 3. problem is, when use bytearray, byte, encode etc functions array size of element 14 bytes, not 1 byte expected. need split text file sequence of bytes , send them byte after byte using sockets. tried this: infile = open (file, "r") str = infile.read() byte_str = bytes(str, 'utf-8') print("size of byte_str",sys.getsizeof(byte_str[0])) print gives me 14, need 1... suggestion? quoting official documentation : sys.getsizeof(object[, default]) return size of object in bytes. object can type of object. built-in objects return correct results, not have hold true third-party extensions implementation specific. only memory consumption directly attributed object accounted for, not memory consumption of objects refers to. if given, default returned if object not provide means retrieve size. otherwise typeerror raised. getsizeof() calls object’s __sizeof__ method , adds ...
Read more