joymis Posted March 20, 2017 Share Posted March 20, 2017 Hello, this is my code demo https://jsfiddle.net/ugkfk64o/ when I click "new" button and then click cell "c" -> "down" button, it will move 2 rows but if I don't click "new" button, I only click cell "c" -> "down" button, it's ok where is this error? Link to comment Share on other sites More sharing options...
Ingolme Posted March 20, 2017 Share Posted March 20, 2017 Every time you create a new row you're adding another event handler to all the rows. The newest row will have just one event handler, but the older rows will have as many event handlers as times you've clicked the "new" button. 1 Link to comment Share on other sites More sharing options...
rockey91 Posted March 20, 2017 Share Posted March 20, 2017 Hi Joymis, as Ingolme said the event is being added every time the new row is added. Here is the fix - https://jsfiddle.net/rockey91/8zzq635c/ 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted March 20, 2017 Share Posted March 20, 2017 Events like these are applied to elements on loading of the page, if you place them in a function you apply the exactly the same event with same outcome again everytime the function is called, very inefficient, generally if these are placed in function you are doing it wrong. You don't even require the function, you just need to target the parent and then the newly created class references. function addFlowLine() { var table = document.getElementById("query_content_unexe"); var row = table.insertRow(0); row.insertCell(0).innerHTML = '<button class="up">up</button>'; row.insertCell(1).innerHTML = '<button class="down">down</button>'; row.insertCell(2).innerHTML = 'add'; } $("#unexe_table").on("click", ".up, .down", function() { var row = $(this).parents("tr:first"); if ($(this).is(".up")) { row.insertBefore(row.prev()); } else { row.insertAfter(row.next()); } }); 1 Link to comment Share on other sites More sharing options...
joymis Posted March 21, 2017 Author Share Posted March 21, 2017 21 hours ago, Ingolme said: Every time you create a new row you're adding another event handler to all the rows. The newest row will have just one event handler, but the older rows will have as many event handlers as times you've clicked the "new" button. 19 hours ago, rockey91 said: Hi Joymis, as Ingolme said the event is being added every time the new row is added. Here is the fix - https://jsfiddle.net/rockey91/8zzq635c/ Thank you for your help, I thought it would cover the original event handler 11 hours ago, dsonesuk said: Events like these are applied to elements on loading of the page, if you place them in a function you apply the exactly the same event with same outcome again everytime the function is called, very inefficient, generally if these are placed in function you are doing it wrong. You don't even require the function, you just need to target the parent and then the newly created class references. my code was originally written like this, but tbody content from ajax return and I have use blockUI plugin function SearchQuery(){ $.ajax({ ...... async: false, beforeSend:function(){ $.blockUI({ css: { border: 'none', padding: '15px', backgroundColor: '#000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff' }, message: '<p>Searching,please wait...</p>' }); }, success: function(response) { $("#query_content_unexe").html(response['query_content']); actOrder(); }, complete:function(){ $.unblockUI(); } }) } when I use "async: false" blockUI will not work, if I no use "async: false" up and down click will not work, so I used the function Link to comment Share on other sites More sharing options...
dsonesuk Posted March 21, 2017 Share Posted March 21, 2017 With the code I provided, it does not require being placed in function, it runs its own anonymous function if a specific classed element within a specific parent id element is clicked even if a specific currently classed element already exists OR is newly created which is what 'on()' is specifically used for. 1 Link to comment Share on other sites More sharing options...
joymis Posted March 22, 2017 Author Share Posted March 22, 2017 18 hours ago, dsonesuk said: With the code I provided, it does not require being placed in function, it runs its own anonymous function if a specific classed element within a specific parent id element is clicked even if a specific currently classed element already exists OR is newly created which is what 'on()' is specifically used for. Thank for your help, I'm not notice your main is $("#unexe_table").on("click", ".up, .down", function() {...}) not $(".up, .down").on("click", function() {...}) $("#unexe_table").on("click", ".up, .down", function() {...}) can be work thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now