为什么这个JavaScript事件没有被触发？

Question

基本上，如果有这个就行了。它将打开一个查询对话框

$("#opener").click(function() {
    $.ajax({
        url: "hello.php",
        success: function(data) {
            $("#dialog").html(data).dialog("open");
        }
    });

    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true
    });
});​

我想从一个

onClick="callMyFuncion(withDetails);

并且基本上用myDetails发送一个ajax get请求。这就是我正在尝试的

function getDayDetails(details) {
    $.ajax({
        type: "GET",
        data: details,
        url: "hello.php",
        success: function(data) {
            $("#dialog").html(data).dialog("open");
        }
    });

    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true
    });
};​

从这里呼叫它

<td class="everyday" onClick="getDayDetails(monthID=<?php echo $month; ?>&dayID=<?php echo $day_num; ?>&yearID=<?php echo $year; ?>);">

我是Javascript/ Jquery的新手。谢谢你的帮助

Answer 1

我相信你之所以选择使用内联JavaScript，是因为你手头没有办法让它动态化。

另一种方法是使用data-*属性来保存日期值。如下图所示：

<td class="everyday"
    data-month="<?php echo $month; ?>"
    data-day="<?php echo $day_num; ?>"
    data-year="<?php echo $year; ?>">
  ...
</td>

并且继续使用.click()函数，而不是像所说的那样内联JavaScript，这应该更好地避免。

$("td.selector").click(function() {
  var data = $(this).data();
  $.ajax({
    type: "GET",
    url: "hello.php",
    data: { monthID: data.month, dayID: data.day, yearID: data.year },
    success: function(data) {
      $("#dialog").html(data).dialog("open");
    }
  });
});​

将data作为对象传递给$.ajax的好处是，jQuery将自动对参数进行编码。

最后，您可以将.dialog()初始化转移到.ready()函数。

$(document).ready(function() {
  $("#dialog").dialog({
    bgiframe: true,
    autoOpen: false,
    height: 400,
    width: 400,
    modal: true
  });
});

Answer 2

Ajax是异步。所以它不会这样工作的..

尝尝这个

$(function(){ // In the DOM ready
              // define the code for the dialog
    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true
    });
});​

function getDayDetails(details) {
    $.ajax({
        type: "GET",
        data: details,
        url: "hello.php",
        success: function(data) {
            $("#dialog").html(data).dialog("open");
            // Add the new HTMl to the dialog and then open..
        }
    });
}

Answer 3

PHP生成的结果参数是一个字符串。所以你也应该用引号把它括起来。

<td class="everyday" onClick="getDayDetails('monthID=<?php echo $month; ?>&dayID=<?php echo $day_num; ?>&yearID=<?php echo $year; ?>');">