无法在jquery中使用调用函数

<script type="text/javascript">

alert("hello");
$(function viewKart(event) {
    alert("hello");
    $("#popupdiv").dialog({
        title: "AddCart",
        width: 630,
        height: 450,
        modal: true,
        buttons: {
            Close: function () {
                $(this).dialog('close')
            }
        }
    });
    return false;
});
</script>

<div class="text">
    <a id="cartClick" onclick="viewKart();" href="#"> Cart(@if ( @App["CartLen"] != null) { @App["CartLen"] })</a>
</div>

 <div id="popupdiv" title="Basic modal dialog" style="display: none">
       <p>Hello World !</p>

    </div>

I am trying to call a jquery function but unable to do so. I have a text "Cart(0)" which I want to be a link to view the cart which is actually a pop-up.

我试图调用jquery函数但无法这样做。我有一个文本“Cart（0）”，我希望它是一个链接，以查看实际上是弹出窗口的购物车。

3 个解决方案

#1

No need for a jQuery wrap around your function.

不需要jQuery环绕你的功能。

function viewKart() {
  alert("hello");
  $("#popupdiv").dialog({
    title: "AddCart",
    width: 630,
    height: 450,
    modal: true,
    buttons: {
      Close: function() {
        $(this).dialog('close')
      }
    }
  });
  $("#popupdiv").dialog("open")
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>


<div class="text">
  <a id="cartClick" onclick="viewKart();" href="#"> Cart(...)</a>
</div>

<div id="popupdiv" title="Basic modal dialog" style="display: none">
  <p>Hello World !</p>
</div>

#2

Use the power of jQuery handler, and keep clean your html:

使用jQuery处理程序的强大功能，并保持清理你的html：

1. use .on("click") handler, instead a function:

    $(function(){
        //alert("Document Ready");
        $("#cartClick").on("click",function(e){
            //alert("Button clicked!!");

            $("#popupdiv").dialog({
                title: "AddCart",
                width: 630,
                height: 450,
                modal: true,
                buttons: {
                    Close: function () {
                        $(this).dialog('close')
                    }
                }
            });
            return false;
        });
    });

jQuery API : .on("click")

jQuery API：.on（“点击”）

2. remove onClick attribute on your html.

    <div class="text">
        <a id="cartClick" href="#"> Cart(@if ( @App["CartLen"] != null) { @App["CartLen"] })</a>
    </div>

Every time a user click on element with ID #cartClick jQuery trigger your function (anonymous).

每次用户点击带有ID的元素#cartClick jQuery都会触发你的功能（匿名）。

Note. My answer is just for your knowledge, all the others are equally valid.

注意。我的回答只是为了你的知识，所有其他人都同样有效。

#3

The function viewKart is not in the global scope

函数viewKart不在全局范围内

alert("hello");
$(viewKart);
function viewKart(event) {
    alert("hello");
    $("#popupdiv").dialog({
        title: "AddCart",
        width: 630,
        height: 450,
        modal: true,
        buttons: {
            Close: function () {
                $(this).dialog('close')
            }
        }
    });
    return false;
}