joymis

Move table row error

7 posts in this topic

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 person likes this

Share this post


Link to post
Share on other sites

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 person likes this

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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 person likes this

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.


Sign In Now