小编MSC*_*MSC的帖子

Bootstrap 3模式通常使页面更暗以突出显示模态本身,并表示在模式显示时页面UI被禁用.

在我的编码(几周前)的某个时刻,背景停止出现.其他一切正常,包括通过单击它或单击右上角的X来关闭模态.页面UI也被禁用,直到模态关闭,这很好.由于它有数千行代码,我不会在这里粘贴它们.

我无法弄清楚为什么我的模态背景缺失.我已经验证了我的HTML,以确保没有丢失的标签.我也在我的页面上使用datatables,tabdrop和d3但是已经尝试逐个删除这些(JS和CSS)以解决问题无济于事.我还应该检查什么？

这是页面:http://suite.swiftdigital.com.au/scripts/marcus/modal/event.htm

单击绿色的"新参与者"按钮以查看其中一个模态.另一个是屏幕中间的编辑视图按钮.

我有一个 ActiveJob，它在创建记录 X 分钟后将其状态字段从“待处理”更改为“实时”。效果很好。

当用户在 X 分钟内编辑记录时，我需要推迟该状态更改，即。重新启动时钟。想必我会通过取消 ActiveJob 并创建一个新的来做到这一点。Rails Guides for ActiveJob没有提到应该如何完成此操作。

我发现我可以将 ActiveJob 分配给这样的变量：

j = ThingLiveJob.set(wait: 1.minute).perform_later(@thing)

并在该行之后立即使用byebug（在控制器中），我看到它的输出如下：

#<ThingLiveJob:0x000000134a5fc0 @arguments=[#<Thing id: 1095, body: "Whatever", user_id: 1, created_at: "2018-11-19 10:34:24", updated_at: "2018-11-19 10:34:24", status: "pending">], @job_id="aab28c66-f8b4-491e-9c7f-af6f27aa482e", @queue_name="default", @priority=nil, @executions=0, @scheduled_at=1542623724.674397, @provider_job_id="61c154d5-9c1b-45a1-8487-824a4412c53c">

然而，在控制台，这些（猜测）都不起作用：

j.destroy

j.delete

那么我该怎么办呢？

我很困惑为什么设置元素属性的d3方法在传统的JS方法工作时失败(在这段代码中).(我正在尝试更新chloropleth颜色,因为用户单击HTML按钮来更改正在绘制的数据,所有这些都来自相同的JSON.)

HTML很简单:

<div id="buttons">
    <button id="party">Parties</button>
    <button id="tenure">Tenure</button>
</div>

这是相关的JS与两条线并排.当我在Chrome中运行它时,我得到"对象#没有方法'attr'":

var paths = svg.selectAll("path");

var plot = {
    "mode": "party",
    "redraw": function()    {
        var e = e || window.event;
        var targ = e.target || e.srcElement;
        if (targ.nodeType == 3) targ = targ.parentNode;

        switch (targ.id)    {
        case "party":
            // some code in here
            break;
        case "tenure":
            paths.each(function(d,i) {
                this.setAttribute("class","");  // Same question here actually
            if (d.In_Office_Full_Date) {

//这行错误:

this.attr("style", "fill: " + t_scale(getJSDateFromExcel(d.In_Office_Full_Date).getFullYear()));

// ...但是这条线有效:

this.setAttribute("style", "fill: " + t_scale(getJSDateFromExcel(d.In_Office_Full_Date).getFullYear()));

            } …

我有一个包含一个函数的小JS文件(common.js).我在application.js中有以下几行:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.readyselector
//= require common
//= require_tree .

当我存储它时

app/assets/javascripts

要么

vendor/assets/javascripts

文件已正确加载,但当我将其移动到

lib/assets/javascripts

它停止工作,我得到错误:

Sprockets::FileNotFound
couldn't find file 'common'
(in C:/Sites/rails_studio/beatjoe/app/assets/javascripts/application.js:21)

我的Rails.application.config.assets.paths所有这些都是:

- C:/Sites/rails_studio/myappname/app/assets/images
- C:/Sites/rails_studio/myappname/app/assets/javascripts
- C:/Sites/rails_studio/myappname/app/assets/stylesheets
- C:/Sites/rails_studio/myappname/lib/assets/javascripts
- C:/Sites/rails_studio/myappname/vendor/assets/fonts
- C:/Sites/rails_studio/myappname/vendor/assets/images
- C:/Sites/rails_studio/myappname/vendor/assets/javascripts
- C:/Sites/rails_studio/myappname/vendor/assets/stylesheets
- C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/turbolinks-2.3.0/lib/assets/javascripts
- C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/jquery-rails-3.1.2/vendor/assets/javascripts
- C:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/coffee-rails-4.0.1/lib/assets/javascripts

根据文档,不仅应该包括common.js

//= require common

但也被抓住了

//= require_tree .

我错过了什么？

我已经读过jQuery和Vue往往不能很好地协同工作(参见例如https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/).由于我有一个大型的jQuery应用程序,我逐步将Vue纳入其中,我想了解幕后发生了什么,以便我可以避免冲突.

这是一个简化的测试页面:

$('#a').click(function() {
  alert('a');
});

$(function() {
  $('#b').click(function() {
    alert('b');
  });
});

var app = new Vue({
  el: '.container',
  mounted: function() {
    $('#c').click(function() {
      alert('c');
    });
  }
});

$('#d').click(function() {
  alert('d');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="a">a - jQuery immediate</button>
  <button id="b">b - jQuery DOM ready</button>
  <button id="c">c - jQuery inside Vue mounted</button>
  <button id="d">d - jQuery after Vue</button>
</div>

如您所见,第一个(a)事件监听器被Vue消灭,而其他三个(b-d)继续工作.

我的问题归结为,在技​​术层面,Vue对(a)与(b)或(d)不同的做法是什么？

CodePen: https ://codepen.io/MSCAU/pen/PxzQNq