2013-08-14 40 views
10

Tôi đang cố gắng gọi một hàm theo tên .onchange của một lựa chọn nhưng không có gì xảy ra. Khi hàm được mô tả sau thuộc tính, hàm đó hoạt động.jquery: Chức năng gọi theo tên khi chọn thay đổi

NÀY KHÔNG LÀM VIỆC

HTML:

<select id="numb"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

SCRIPT:

<script type="text/javascript"> 
    $('#numb').change(testMessage); 
</script> 

<script type="text/javascript"> 
    function testMessage(){ 
     alert('Hello'); 
    } 
</script> 

TRÌNH NÀY

HTML:

012.
<select id="numb"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

SCRIPT:

<script type="text/javascript"> 
    $('#numb').change(function(){ 
     alert('Hello') 
    }); 
</script> 

EDIT:

Ok, cho tất cả những người đã nói với tôi để bao gồm các chức năng trên cùng một kịch bản. Điều này là không thể bởi vì hàm testMessage() nằm trong tập lệnh .js bên ngoài được bao gồm trên <head> của HTML.

+2

Bảng điều khiển của bạn có nội dung gì? Một cái gì đó như 'testMessage không được định nghĩa'? – tymeJV

+0

bạn nên thực sự làm sự kiện của bạn ràng buộc bên trong một document.ready chức năng –

+0

Hoạt động tốt cho tôi: http://jsfiddle.net/FMynS/ –

Trả lời

19

Đó là vì xử lý testMessage không được định nghĩa khi gắn nó vào sự kiện thay đổi.

Nó sẽ làm việc nếu nó là trong bối cảnh kịch bản tương tự như dưới đây,

<script type="text/javascript"> 
    $('#numb').change(testMessage); 

    function testMessage(){ 
     alert('Hello'); 
    } 
</script> 

Mã bên <script></script> được thực hiện từng người một tiến bộ từ đầu và testMessage chức năng không tồn tại bên trong <script></script> đầu tiên.

Bạn có vài tùy chọn ở đây,

  1. Đặt nó bên trong một chức năng ẩn danh mà sẽ cho phép script của bạn để giải quyết testMessage chức năng sau.[Như đã đề cập trong Optimus Prime câu trả lời]

    <script type="text/javascript"> 
        $('#numb').change(function() { 
        testMessage 
        }); 
    </script> 
    <script type="text/javascript"> 
        function testMessage(){ 
         alert('Hello'); 
        } 
    </script> 
    
  2. Bao gồm các kịch bản có testMessage chức năng trên script gắn kết các testMessage như dưới đây,

    <script type="text/javascript"> 
    function testMessage(){ 
        alert('Hello'); 
    } 
    </script> 
    <script type="text/javascript"> 
        $('#numb').change(testMessage); 
    </script> 
    
+0

Xem chỉnh sửa trên câu hỏi của tôi – Perocat

+1

@Perocat Quấn nó bên trong chức năng ẩn danh. Hàm xử lý 'testMessage' là cần thiết để được giải quyết khi liên kết với sự kiện onchange, nhưng không phải là nội dung của hàm điều khiển. –

0

Bạn phải xác định gọi lại trên hàm thay đổi.

<script type="text/javascript"> 
    $('#numb').change(function(){ 
     testMessage(); 
    ); 

    function testMessage(){ 
     alert('Hello'); 
    } 
</script> 

Điều đó sẽ khắc phục được sự cố của bạn.

4

Thay vì cố gắng,

<script type="text/javascript"> 
    $('#numb').change(function(){ 
     testMessage(); 
    }); 
</script> 
+0

Công trình này! tại sao? – Perocat

+1

@Perocat Hàm xử lý được yêu cầu phải được giải quyết khi ràng buộc, nhưng không phải là nội dung của hàm điều khiển. –

+1

@Perocat Chức năng ẩn danh làm trì hoãn sự thiếu cân nhắc của 'testMessage'. Đến lúc đó, nó sẽ được xác định. –

1

Hãy thử điều này và đặt trong cùng một kịch bản tag:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#numb').change(testMessage); 

     function testMessage(){ 
      alert('Hello'); 
     } 
    }); 
</script> 
+0

Xem chỉnh sửa trên câu hỏi của tôi – Perocat

2

Working Jsfiddle thử điều này:

<script type="text/javascript"> 
    $('#numb').on('change',testMessage); 
</script> 
+0

Xem chỉnh sửa trên câu hỏi của tôi – Perocat

+0

mã cập nhật ..... kiểm tra ngay bây giờ :) –

+0

Đã thử, không hoạt động – Perocat

0

Tôi không nghĩ rằng các bạn tham khảo tồn tại chưa đến chức năng ở đây là hai cách bạn có thể làm điều đó. Tôi đặt phiên bản không gian tên làm đề xuất vì nó có thể giúp dọn sạch mã của bạn nói chung.

HTML:

<select id="numb"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select> 

SCRIPT:

// namespaced và sử dụng Proxy

<script type="text/javascript"> 
    var project = project || {}; 
    project = { 
     testMessage: function (event) { 
      alert('Hello'); 
     } 
    }; 

    $('#numb').change($.proxy(project.testMessage, project)); 
</script> 

// Chỉ cần tuyên bố

<script type="text/javascript"> 
    function testMessage(){ 
     alert('Hello'); 
    } 

    $('#numb').change(function(event) { 
     testMessage(); 
    }); 
</script> 

Nếu phương pháp của bạn là trong tập tin khác chắc chắn y ou bao gồm tệp đó trước tệp có liên kết sự kiện. Bạn có gặp phải bất kỳ lỗi giao diện điều khiển nào không?

Các vấn đề liên quan