javascript onchange函数不起作用

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一起使用吗？ 我正在引导模式下工作

解决方案我所做的所有事情不是刷新页面，我以为只是通过加载模式来刷新页面是多么愚蠢的事情。

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代码中添加了line_item类。
• 为了使代码更易于在JSFiddle中调试，在javascript中添加了警报。

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." );
}

您缺少函数定义上的function关键字，

但是，强烈建议不要使用内联JS。 （尝试1 ...委派）

2.这里是推荐的方法：

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

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

Answer 3

首先，只需从select删除onchange属性。 因为首先您告诉寻找不存在的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

您的代码有很多地方不对，有些事情可能会改变，仅仅是因为它们可以改变。

首先，您当前的函数（在尝试2中）不需要document.ready函数，但是它依赖于内联JS（这是禁止的）。 然后，您也忘记了document.ready的function关键字。

让我们重构您的第一次尝试...

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

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

...

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

简单的东西。