javascript - rails : Why can't my object created by ajax be used to trigger javascript?

Question

我正在尝试为“事物”模型实现一个ajax投票系统，如果用户对事物进行投票，那么一个新事物会出现在旧事物的位置，然后他可以对其进行投票，依此类推。这发生在事物 View 本身上。

我很确定这个确切的代码在一周前是有效的，但现在它神秘地崩溃了。现在，该事物在第一次投票时被替换，但此后投票不再产生新事物:

views/things/show.html.erb

<div id="randajax">
  <%= link_to image_tag("UpArrowGray.jpg", class: "rand_up_vote"), upvoterandom_thing_path(@rand.id), remote: true, method: :get %>
  <script type="text/javascript">
    function reload_script() {
        $(".rand_up_vote").click(function () {
          $.get( "<%= upvoterandom_thing_path(:id => @rand.id) %>", function( data ) {
            $('#randajax').html(data);
            reload_script();
          });
        });
    }
    reload_script();
  </script>
</div>

Controller /things_controller.rb

def upvoterandom
  @thing = Thing.find(params[:id])
  UpVote.create!
  @rand = Thing.all.first
  render text: "<a data-method=\'get\' data-remote=\'true\' href=\'" + upvoterandom_thing_path(@rand.id) + "\'><img alt=\'Upvote\' class=\'rand_upp_vote\' src=\'/assets/UpArrowGray.jpg\' /></a>".html_safe
end

显然，问题在于使用 ajax 创建的项目无法执行 javascript。 Web 控制台显示 upvoterandom_thing_path 正在执行，但 randajax div 没有任何反应。我尝试为从原始 javascript 创建的事物提供一个具有不同 javascript 的差异类，但这也不起作用，尽管具有相同类的单独项目(“THIS_WORKS”)通常执行相同的 javascript:

views/things/show.html.erb

<%= link_to "THIS_WORKS", "#", class: "TEST_TEST", remote: true %>

<div id="randajax">
  <%= link_to image_tag("UpArrowGray.jpg", class: "rand_up_vote"), upvoterandom_thing_path(@rand.id), remote: true, method: :get %>
  <script type="text/javascript">
    function reload_script() {
        $(".rand_up_vote").click(function () {
          $.get( "<%= upvoterandom_thing_path(:id => @rand.id) %>", function( data ) {
            $('#randajax').html(data);
            reload_script();
          });
        });
    }
    reload_script();
  </script>
  <script type="text/javascript">
    $(".TEST_TEST").click(function () {
      $('#randajax').html("TEST");
      });
  </script> 
</div>

Controller /things_controller.rb

def upvoterandom
  @thing = Thing.find(params[:id])
  UpVote.create!
  @rand = Thing.all.first
  render text: "<a data-method=\'get\' data-remote=\'true\' href=\'" + upvoterandom_thing_path(@rand.id) + "\'><img alt=\'Upvote\' class=\'rand_up_vote\' src=\'/assets/UpArrowGray.jpg\' /></a>".html_safe
end

谁能解释一下为什么会发生这种情况或者我该如何解决这个问题？

Answer 1

当您设置它时，您可以在 JavaScript 中执行以下操作:

$(".rand_up_vote").click(function () {
  ...

这会设置元素上的单击事件。当替换其中一个元素或添加新元素时，它还没有添加此事件，因此它不会像其他元素那样工作。

要解决此问题，您需要将相同的事件添加到新元素，或者从所有元素中删除该事件，然后将其添加到所有元素(如果您不先删除它，则可能会冒两次触发相同事件的风险)单击或其他任何方式)。

使用建议的解决方案进行编辑。

最简单的方法是向元素添加 onclick 属性，以运行 reload_script() 函数。更改此设置，以便它不会向事件添加 onclick。我正要开始编辑您的代码，我注意到 reload_script 函数在您添加为 onclick 事件的匿名函数末尾调用自身:这意味着当您单击 .rand_up_vote 时元素，它将执行 AJAX get，替换 html，然后向所有元素添加另一个 onclick。这绝对是不对的 - 这是解决此问题的早期尝试吗？

你可能只需要这样的东西:

<div id="randajax">
  <%= link_to image_tag("UpArrowGray.jpg", class: "rand_up_vote"), upvoterandom_thing_path(@rand.id), remote: true, method: :get %>
  <script type="text/javascript">
    function reload_script() {
      $.get( "<%= upvoterandom_thing_path(:id => @rand.id) %>", function( data ) {
        $('#randajax').html(data);
      });
    }
  </script>
</div>

现在编辑 html，使每个 .rand_up_vote 元素都有一个 onclick="reload_script()" 属性。