Question

我正在开发一个应用程序，该应用程序的页面上有多个可单击的图像，一个可编辑的表单文本字段，所有这些都触发了带有Ajax调用的Jquery函数，并且所有内容都在JS文件中。一切正常。

但是，我知道有一个具有SELECT框的不同窗体，并且我希望它在更改时也触发函数/ Ajax调用。我什至无法得到一个简单的警报。

我只是想知道，我是否可能将其放在错误的位置或类似的位置。这是我第一次涉足JQuery，目前正在通过反复试验和教程进行工作，但是似乎没有关于功能的代码组织的任何内容。

侧面说明：执行'onChange =“ alert（” Hello“）;'

时，我可以在SELECT上触发onChange事件。

HTML代码

            <form name="RankingForm" id="RankingForm">
                <td style="color: white;">
                    <select name="Ranking" id="Ranking" >
                        <option value="4" selected>Open</option>
                        <option value="3" >Advanced</option>
                        <option value="2" >Intermediate</option>
                        <option value="1" >Beginner</option>
                    </select>
                </td>
            </form>

jQuery JS文件

$(document).ready(function(){
  var str = this.ID;

  $("input").focusout(function() { 
    $.ajax ({
      WORKING CODE
    })
  });

  $("img").click(function(){
    if (this.id.split('_')[0] == 'Favorite') {
        $.ajax ({
          WORKING CODE
      })
    }
    else if (this.id.split('_')[0] == 'Sent') {
      $.ajax ({
        WORKING CODE
      })
    }
    else if (this.id.split('_')[0] == 'Flash') {
      $.ajax ({
        WORKING CODE
      })
    }
  });
});

$('select[name=Ranking]').on("change", function () {
    alert(this.options[this.selectedIndex].value);
    //NOT WORKING
    alert("Hello");
    //ALSO NOT WORKING
});

谢谢。

Answer 1

是的，位置错误，更改侦听器不在.ready(..)回调函数之外。之所以可以这样，是因为您使用.on(..)设置了侦听器，但是在执行代码时必须在DOM中的对象上调用.on(..)，例如

$(document).on('select[name=Ranking]', 'change', function(){
  ..
});

Answer 2

两种代码解决方案都不适合我，但Titus在其注释文本中有答案。

将其移动到.ready（..）函数中确实有效。我想需要对具有独立功能而不是具有较大功能进行一些研究。

jQuery选择更改代码组织

2 个答案: