jquery

以下html可独立运行

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="./jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $('.del').live('click',function(){
                $(this).parent().parent().remove();
            });

            $('.add').live('click',function(){
                $(this).val('Delete');
                $(this).attr('class','del');
                var appendTxt = "<tr><td><input type='text' name='name[]' /></td> <td><input type='text' name='value[]' /></td> <td><input type='checkbox' name='regex[]' /></td><td><input type='button' class='add' value='Add More' /></td></tr>";
                $("tr:last").after(appendTxt);
            });
        });
    </script>
    <style>
        table {
          table-layout: fixed;
          width:1200px;
        }
        input{
          width:285px;
        }
    </style>
 </head>

<body>
    <form method="post" action="/silencealert">
    <table id="options-table">
        <tr>
            <td>Name</td>
            <td>Value</td>
            <td>Regex</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><input type="text"   name="name[]" /></td>
            <td><input type="text"   name="value[]" /></td>
            <td><input type="checkbox"  name="regex[]" /></td>
            <td><input type="button" class='del' value='Delete' /></td>
        </tr>
        <tr>
            <td><input type="text"   name="name[]" /></td>
            <td><input type="text"   name="value[]" /></td>
            <td><input type="checkbox"   name="regex[]" /></td>
            <td><input type="button" class="add" value="Add More" /></td>
        </tr>
    </table>
    <br>
    <label for="number"> Expires(Days[1-30]): </label>
    <input type="number" min="1" max="30" value="" name="days">
    <br><br>
<button type="submit">SilenceAlert</button>
  </form>
    <hr>
    <small>User: %s</small>
</body>

使用上面的文件，当我单击“添加更多”时，将添加一个新表行，而当我单击“删除”时，将删除一个表行。这是预期的行为。

我在golang项目中使用上述html(文件-main.go)

package main

import (
    "fmt"
    "github.com/gorilla/mux"
    "net/http"
)

const manage_alertsPage = `
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="text/javascript" src="./jquery-1.7.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                $('.del').live('click',function(){
                    $(this).parent().parent().remove();
                });

                $('.add').live('click',function(){
                    $(this).val('Delete');
                    $(this).attr('class','del');
                    var appendTxt = "<tr><td><input type='text' name='name[]' /></td> <td><input type='text' name='value[]' /></td> <td><input type='checkbox' name='regex[]' /></td><td><input type='button' class='add' value='Add More' /></td></tr>";
                    $("tr:last").after(appendTxt);
                });
            });
        </script>
        <style>
            table {
              table-layout: fixed;
              width:1200px;
            }
            input{
              width:285px;
            }
        </style>
     </head>

    <body>
        <form method="post" action="/silencealert">
        <table id="options-table">
            <tr>
                <td>Name</td>
                <td>Value</td>
                <td>Regex</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td><input type="text"   name="name[]" /></td>
                <td><input type="text"   name="value[]" /></td>
                <td><input type="checkbox"  name="regex[]" /></td>
                <td><input type="button" class='del' value='Delete' /></td>
            </tr>
            <tr>
                <td><input type="text"   name="name[]" /></td>
                <td><input type="text"   name="value[]" /></td>
                <td><input type="checkbox"   name="regex[]" /></td>
                <td><input type="button" class="add" value="Add More" /></td>
            </tr>
        </table>
        <br>
        <label for="number"> Expires(Days[1-30]): </label>
        <input type="number" min="1" max="30" value="" name="days">
        <br><br>
    <button type="submit">SilenceAlert</button>
      </form>
        <hr>
    </body>
</html>
`

func manage_alertsPageHandler(response http.ResponseWriter, request *http.Request) {
    fmt.Fprintf(response, manage_alertsPage)
}

func silencealertPageHandler(response http.ResponseWriter, request *http.Request) {

    err := request.ParseForm()
  if err != nil {
      // Handle error here via logging and then return
    fmt.Fprintf(response, "There was an error processing form: " + err.Error())
    return
  }
  fmt.Printf("%+v\n", request.Form)

    fmt.Fprintf(response, manage_alertsPage)
}

// server main method

var router = mux.NewRouter()

func main() {

  router.HandleFunc("/manage_alerts", manage_alertsPageHandler)
    router.HandleFunc("/silencealert", silencealertPageHandler)

    http.Handle("/", router)
    http.ListenAndServe(":8000", nil)
}

go项目的文件夹结构为

src/web
 - main.go
 - jquery-1.7.min.js

当我运行go项目时:

go run main.go

浏览到

localhost:8000/manage_alerts

单击添加更多或删除按钮，没有任何 react

需要一些帮助来找出为什么在golang代码外部执行时，javascript代码在此处未执行的原因。

最佳答案

当直接在浏览器中打开HTML文件时，浏览器将在文件系统中查找jquery文件。当您通过导航到localhost:8000/...来查看页面时，浏览器将在localhost:8000/...处查找jquery文件。

您的Go应用程序只能处理对您注册的这两个路径的请求。它呈现的html页面将向localhost:8000/jquery-1.7.min.js发出请求以下载jquery文件，但您尚未注册处理程序来处理此类请求...

也就是说，您缺少这样的内容:

router.HandleFunc("/jquery-1.7.min.js", serveJQuery)

尽管在现实世界中，您可能不仅仅希望提供单个文件，还可以查看static files上gorilla/mux的自述文件以获得更完整的解决方案。

关于jquery - golang javascript ui问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44032886/

jquery - golang javascript ui问题