Question

我在haml视图中有一个下拉列表：

= collection_select(:vehicle_part, :service, Inventory.all, :id, :title, {}, {id: 'line_item', class: 'line_item', :onchange => "{my_function(this);}"})

它产生以下HTML（对于那些不懂haml 的人）

<select class="line_item" id="line_item" name="vehicle_part[service]" onchange="{my_function(this);}">
  <option value="1">first line</option>
  <option value="2">second line</option>
</select>

我的javascript看起来像：

尝试1

$(document).ready(function () {
    $( ".line_item" ).change(function() {
        console.log( "Handler for .change() called." );
    });
});

尝试2

$(document).ready(function () {
    my_function(value) {
        console.log( "Handler for .change() called." );
    });
});

我不知道为什么这不起作用，因为一切似乎都很好。

任何帮助我做错了什么？

忘记提及：这是否适用于bootstrap-modal？我在bootstrap-modal

工作

解决方案我所做的一切都没有刷新我的页面，我多么愚蠢只是认为通过加载模态会刷新页面。

Answer 1

这是一个有效的代码：

<强> HTML：

<select class="line_item" id="line_item" name="vehicle_part"><option value="1">first line</option><option value="2">second line</option></select>

<强>的javascript：

$(document).ready(function () {
    $( ".line_item" ).change(function() {
        alert("abc");
    });
});

请注意，我已经更改了console.log以获取警报，它更容易调试。

以下是JSFiddle链接。

需要改变的事情：

从HTML代码中删除onchange事件
在HTML代码中添加了class line_item。
在javascript中添加了一个警报，以便在JSFiddle中更容易调试代码。

Answer 2

<强> 1。当前问题的解决方案：（尝试2 ...但没有准备好DOM）

你可以改变：

onchange="{my_function(this);}"

要：

onchange="my_function(this);"

然后从函数周围删除DOM就绪 - 否则你的内联代码（全局作用域）看不到DOM就绪范围内的函数。

function my_function(value) {
    console.log( "Handler for .change() called." );
}

您错过了函数定义中的函数关键字

然而，内联JS非常不鼓励。（尝试1 ...委派）

<强> 2。以下是建议的方法：

$(function() {
   $(document).on('change', '.line_item', function() {
        console.log( 'change event fired' );
    });
});

更新：上面的onchange属性＃1中建议的更改没有任何区别，因为代码仍应在大括号更改时触发。该函数的范围应为全局。

Answer 3

对于首次尝试，只需从onchange删除select属性即可。因为首先你告诉我找不到的my_function。

对于第二次尝试，请使用只写这么多javascript

function() {
    console.log( "Handler for .change() called." );
}

Answer 4

现在不要“HAML”，但看起来你的“haml”会产生一个不正确的事件处理程序。

是否可以尝试删除

, :onchange => "{my_function(this);}"

来自您的HAML代码的

，以便生成的HTML看起来像

<select class="line_item" id="line_item" name="vehicle_part[service]"><option value="1">first line</option>
                <option value="2">second line</option></select>

坚持第一次尝试？保留此代码：

$(document).ready(function () {
    $(".line_item").change(function() {
       console.log( "Handler for .change() called." );
    });
});

此jsFiddle显示您需要的内容

Answer 5

你的代码有点不对，有些东西可以改变，只是因为它们可以。

首先，你当前的函数（在try 2中）不需要document.ready函数，但它依赖于内联JS（这是一个禁忌）。然后，您还忘记了function

中的document.ready关键字

让我们重新构思你的第一次尝试......

首先，让我们抛出onchange属性，只用JS做。要么将其保存在document.ready（我不会这样做），要么只是在页面之后加载JS（通常在</body>之前）。

<select id="line_item">...</select>

...

$("#line_item").on("change", function() {
    // ... do stuff here ...
});

简单的东西。

javascript onchange功能不起作用

5 个答案: