The $(document).ready function does not function properly with JQuery’s .append method

Is there an alternative method to relocate the #filters? Does it require another execution of the Onclick function? This concept inspired me to utilize jQuery for transferring the #filters to the #move-filters-here section located above the records.

Question:

This is a subsequent inquiry regarding the lack of change in the toggleClass of the parent div when using onClick.

In my HTML layout, I have discovered that it is necessary to place the div

#filters

after the records instead of before. The reason for this is that I need to utilize PHP in order to create buttons for each state. This realization led me to consider using jQuery, specifically

.append

, to relocate the #filters to the #move-filters-here section above the records. However, when I filter by state, the filters end up appearing below the records and

.append

fails to move the #filters to #move-filters-here above the records.

Does (document).ready not work with

.append

?

Is there an alternative method for moving the

.append

to the #filters?

Is there a need for

.append

to execute the “fire” action once more following the execution of the Onclick function?

You can find the Fiddle at this URL: https://jsfiddle.net/j3semt6h/10/

$(document).ready(function(){
$("#filters").append("#move-filters-here");
$('.state-button').on('click', function() {
  let _this = $(this);
  if (!_this.hasClass('active')) {
    $('.state-button.active, .record.active').removeClass('active');
    $('[data-state=' + _this.data('state') + ']').addClass('active');
  }
});
});
  .record {
    display: none;
}
.state-button {
    border: 2px solid #c2c2c2;
    padding: 5px;
    border-radius: 5px;
    margin: 0 10px 0 10px;
}
.state-button.active {
    border-color: red;
}
.record.active {
    display: block;
}

 

Customer 1

  • Focus:
  • Course:
  • Business:
  • Location: 345 Cow Town, Anchorage, AK

Customer 2

  • Focus:
  • Course:
  • Business:
  • Location: Mobile, AR

Customer 3

  • Focus:
  • Course:
  • Business:
  • Location: Los Angeles CA

Customer 3

  • Focus:
  • Course:
  • Business:
  • Location: Flagstaff AZ

Customer 3

  • Focus:
  • Course:
  • Business:
  • Location: SLC UT


Solution 1:

It seems that you are mistaking

append

for

appendTo

. Currently, you are adding the exact text

"#move-filters-here"

to the content of the

#filters

element. It would be effective to utilize

$('#filters').appendTo('#move-filters-here')

instead.

$(document).ready(function(){
$("#filters").appendTo("#move-filters-here");
$('.state-button').on('click', function() {
  let _this = $(this);
  if (!_this.hasClass('active')) {
    $('.state-button.active, .record.active').removeClass('active');
    $('[data-state=' + _this.data('state') + ']').addClass('active');
  }
});
});
  .record {
    display: none;
}
.state-button {
    border: 2px solid #c2c2c2;
    padding: 5px;
    border-radius: 5px;
    margin: 0 10px 0 10px;
}
.state-button.active {
    border-color: red;
}
.record.active {
    display: block;
}

 

Customer 1

  • Focus:
  • Course:
  • Business:
  • Location: 345 Cow Town, Anchorage, AK

Customer 2

  • Focus:
  • Course:
  • Business:
  • Location: Mobile, AR

Customer 3

  • Focus:
  • Course:
  • Business:
  • Location: Los Angeles CA

Customer 3

  • Focus:
  • Course:
  • Business:
  • Location: Flagstaff AZ

Customer 3

  • Focus:
  • Course:
  • Business:
  • Location: SLC UT

(Alternatively, if you wish to utilize

append

specifically for a specific purpose, you must reverse the process and explicitly mention the item to be appended as element:

$('#move-filters-here').append($('#filters'))

.)


Solution 2:


To include the

#filter

into

#move-filters-here

, you can achieve it through the following method:

$("#move-filters-here").append($("#filters"));

By reversing the process, you can successfully achieve your desired outcome.

$("#filters").append("#move-filters-here");

Frequently Asked Questions