为什么 jQuery .html 在替换 Rails 中的原始元素之前生成一个额外的元素？

Question

我正在尝试在将产品添加到购物车时更新购物车状态。

当我点击 "Add to cart" 按钮时，它运行：

$(".cart-text").html("<%= escape_javascript(render 'layouts/cart_text') %>")

这会奇怪地生成一个新的 DOM 元素，然后开始更新该新元素，而不是替换原始元素的内容。在此处查看实际问题：

https://gyazo.com/f3781639b0c8d4008bb38428f6c783bd

这是我当前的代码：

https://github.com/davidalejandroaguilar/simple-cart

编辑：

应用布局

<!DOCTYPE html>
<html>
<head>
  <title>Workspace</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<% flash.each do |key,value| %>
<%= content_tag :div, value, class: "alert alert-#{key}" %>
<% end %>

<p class="cart-text">
<%= render 'layouts/cart_text' %>
</p>

<%= yield %>

</body>
</html>

Create.js.erb 在 views/order_items

$(".cart-text").html("<%= escape_javascript(render 'layouts/cart_text') %>")

订单商品控制器

class OrderItemsController < ApplicationController
  def create
    @order = current_order
    @order_item = @order.order_items.build(order_item_params)
    @order.save
    session[:order_id] = @order.id
  end

  def update
    @order = current_order
    @order_item = @order.order_items.find(params[:id])
    @order_item.update_attributes(order_item_params)
    redirect_to :back
  end

  def destroy
    @order = current_order
    @order_item = @order.order_items.find(params[:id])
    @order_item.destroy
    redirect_to :back
  end

  private

  def order_item_params
    params.require(:order_item).permit(:product_id, :quantity)
  end

end

Answer 1

您不能嵌套 <p> 个标签 (https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)。它创建了一个无效的 DOM。您可以在浏览器的检查器中查找它。

从 layouts/cart_text 中删除 <p> 应该可以解决问题。

为什么 jQuery .html 在替换 Rails 中的原始元素之前生成一个额外的元素？

Why is jQuery .html generating an extra element before replacing the original element in Rails?

jquery

ruby-on-rails

cart