Why does & page reload and after page load?

Question

I use Firefox and work on the page when I notice that & turns into & .

I can usually fix this using html_entitiy_decode() - but in this case it does not work.

Then I discovered it. A warning is triggered after the page loads.

Before

After

Data is loaded using PHP / Yii - not through JS / Ajax. However, I add / remove brands with JS Knockout.

 <ul data-bind="template: { name: 'brand-item-template', data: $root.brands}"> <li> <span id="<?= $brand->id?>" data-bind="text: brand_name, attr: {'id': brand_id}"><?= $brand->name; ?></span> <a href="#" class="remove el-icon-remove-circle" data-bind="click: $parent.removeBrand"></a> </li> </ul> 

Refresh

I found that this JS Knockout code is what the change does. But this code should not run until I add a brand. So why does this affect my & s?

This is a change to self.addBrand = function() . If I remove this function and leave it as it is, everything will be all right. Could this be a Knockout bug?

 $('#store.manage-special-offers').exists(function(){ Store.mangeSpecialOffers(); }); function manageBrandListModel() { var self = this; var store_id = $('.data-item-id').val(); var exiting_list = $('.brand-list ul').clone(); // Data self.brands = ko.observableArray(create_list(exiting_list)); self.brand_name = ko.observable(); self.brand_id = ko.observable(); self.store_id = ko.observable(store_id); // This is the function that makes the chage self.addBrand = function() { if (self.brand_name() != "") { // Update DB $('#store.manage-brands').exists(function(){ $.ajax({ url: site_url + '/associatebrand', type: "POST", dataType: 'json', data: { Brand: { brandId : self.brand_id(), storeId : self.store_id(), add : true } }, success: function (data) { // Add brand to GUI list self.brands.push(new brand(self.brand_id(), self.brand_name())); self.brand_name(""); } }); }); } }.bind(self); (...) function create_list(exiting_list){ var arr_list = []; $(exiting_list).find('li').each(function(e,li){ var id = $(li).find('span').prop('id'); var name = $(li).find('span').html(); // <--- This is the problem. Must be .text() arr_list.push(new brand(id,name)); }); return arr_list; } 

Can someone explain why this is happening?

Answer 1

The loan should really go to both Jeremy Cook and Quentin to point me in the right direction.

  $(exiting_list).find('li').each(function(e,li){ var id = $(li).find('span').prop('id'); var name = $(li).find('span').html(); // <--- This is the problem. Must be .text() arr_list.push(new brand(id,name)); }); 

What I did wrong is that I used .html() and the text was returned in HTML format. Changing this parameter to .text() solved my problem.