html - 为什么 & 在页面加载后变成 & ？

Question

当我注意到 & 变成 & 时，我正在使用 Firefox 并在页面上工作。

通常我可以使用 html_entitiy_decode() 来解决这个问题 - 但在这种情况下它不起作用。

然后我发现了这一点。页面加载后将触发警报。

之前

之后

数据是使用 PHP/Yii 加载的 - 而不是通过 JS/Ajax。但是，我正在使用 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>

更新

我发现这个 JS Knockout 代码是造成改变的原因。但是在我添加品牌之前，不应触发此代码。那么，为什么这会影响我的 &？

是 self.addBrand = function() 做出了改变。如果我删除此功能并保留其余部分，一切都很好。 会不会是 Knockout 错误？

$('#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;
}

谁能解释为什么会这样？

Answer 1

真正应该归功于 JeremyCook 和 Quentin，他们为我指明了正确的方向。

 $(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));
 });

我做错的是我使用了 .html() 并且文本以 HTML 格式返回。将其更改为 .text() 解决了我的问题。