单击"href"按钮的功能未触发

我有一些HTML，它可以作为另一个页面的链接按钮：

<a href="#breakdownDialog" class="ui-btn" data-icon="arrow-r" data-iconpos="right" id="cvResults"> 
  <h3>First Name</h3>   
  <span>87%</span>
</a>

请注意，这是一个单独的html文件JQueryMobile站点，因此#breakdownDialog会将用户带到另一个页面。

我尝试创建一个函数，将一些表元素添加到breakdownDialog页面中，该页面引用了以前从服务器端传入的resultsJSONClient对象：

$('#cvResults').click(function(e) {
$('#cvResultsDialog h3').text(resultsJSONClient.profile_json[i].id);
console.log("json profile"+resultsJSONClient.profile_json);
$('#dialogContent').append(function(){
        for(var i=0; i<resultsJSONClient.profile_json.length; i++){
            return '<table  cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+ 
            resultsJSONClient.profile_json[i].title+'"><td>'+
            resultsJSONClient.profile_json[i].id+'</td><td align="right">'+
            resultsJSONClient.profile_json[i].value+'</td></tr>';
            console.log(resultsJSONClient.profile_json[i].id);
        }
});    
});

我确信该代码中有很多错误，我很乐意调试这些错误，但我首先关心的是如何启动onClick事件。我放入了一些诊断console.log，但它们没有显示，这一定意味着该功能没有触发。为什么没有发生这种事？我已经尝试了onClickJQuery方法的许多变体。

谢谢EDIT:resultsJSONClient对象是（为了简洁起见，我去掉了一些值）：

{ title: 'Name here',
  percentage: 63.2,
  profile_json:
   [ { id: 'Big 5', title: true, value: '' },
 { id: 'Openness', title: true, value: '100%' },
 { id: 'Adventurousness', title: false, value: '98%' },
 { id: 'Artistic interests', title: false, value: '64%' },
 { id: 'Emotionality', title: false, value: '8%' },
 .........]}

我知道这已经到达客户端，因为我的ajax调用正确地返回了它。当按下主页上的另一个按钮时会发生这种情况：

$.ajax({
    url: '/',
    dataType: 'json', //datatype of argument for success function
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',//content type being sent to server 'application/json'
    data: textInput,
    success: function (response) {
        $('#resultsList').append('<a href="#breakdownDialog" class="ui-btn" data-icon="arrow-r" data-iconpos="right" id="cvResults"> <h3>' + response.title + '</h3>   <span>' + response.percentage +
            '%</span></a>');
        console.log(response.title + response.percentage);
        var resultsJSONClient=response;
    },             
});
});

我想知道你是否可以像我一样将这个JSON对象传递给另一个JQuery-onClick函数，但由于我的函数似乎甚至没有触发（没有console.log），我还没有遇到这个问题。最后，我使用的HTML结构概述：

<!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="UTF-8">
           <title>...</title>
            <meta name="viewport" con...>       
            <link rel="stylesheet" href="css/main.css">         
        <script src="https.../2.1.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https:/.../jquerymobile/1.4.3/jquery.mobile.min.css" />
        <script src="https:/.../jquerymobile/1.4.3/jquery.mobile.min.js">    </script>              
        </head>
         <body>
            <!--application UI goes here-->
            <div data-role="page" id="home">
            <div data-role="content">
                 <img src=...>
                 <h1>R...</h1>
                 <div data-role="fieldcontain">                 
                    <id="submitForm">
                     <fieldset>
                          <textarea id="textArea" required="true" ... name="content"></textarea>
                         <button class="btn btn-block" type="submit">
                                Analyse         
                         </button>
                     </fieldset>
                      </form>
                  </div>
            <h2>Results</h2>
            <ul data-role="listview" id="resultsList" data-inset="true">
            </ul>
            </div>      
        </div> 
        <div data-role="page" id="breakdownDialog" data-add-back-btn="true">
            <div data-role="header" id="cvResultsDialog">
            <h3>...</span>
        </div>
        <div data-role="content" id="dialogContent">                
        </div>
    </div>          
        <script src="js/jquery.js"></script>
    <script src="js/pdfExtract.js"></script>
    </body>
</html>

我想我自己的问题已经有了答案。这是因为我是动态生成ID标记的，所以在生成标记之前就已经加载了脚本。

我通过在生成id标记的函数中包含onClick函数来解决这个问题，如下所示（这个脚本中还有一些其他错误，但它解决了事件不触发的问题）：

$.ajax({
    url: '/',
    dataType: 'json', //datatype of argument for success function
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',//content type being sent to server 'application/json'
    data: textInput,
    success: function (response) {
        $('#resultsList').append('<a href="#breakdownDialog" data-transition="slidefade" class="ui-btn" data-icon="arrow-r" data-iconpos="right" id="cvResults"> <h3>' + //data-rel="dialog" data-transition="pop" 
                response.title + 
                '</h3>   <span>' + response.percentage +
            '%</span></a>');
        console.log(response.title + response.percentage);
        var resultsJSONClient=response;
        $('#cvResults').click(function(e) {
            //e.preventDefault();
            console.log("hello");
            $('#cvResultsDialog h3').text(resultsJSONClient.profile_json[i].id);
            console.log("json profile"+resultsJSONClient.profile_json);
            $('#dialogContent').append(function(){
                    for(var i=0; i<resultsJSONClient.profile_json.length; i++){
                        return '<table  cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+ 
                        resultsJSONClient.profile_json[i].title+'"><td>'+
                        resultsJSONClient.profile_json[i].id+'</td><td align="right">'+
                        resultsJSONClient.profile_json[i].value+'</td></tr>';
                        console.log(resultsJSONClient.profile_json[i].id);
                    }
            });    
        });
    },
    error: function(jqXHR, textStatus,errorThrown){
        jQuery.error(errorThrown);
        console.log(errorThrown);
    }        
});
});

这里的更多信息：如何将onclick事件添加到动态生成的div

onclick事件正确触发，请参阅：http://fiddle.jshell.net/bog500/9h8oksnv/

如果您能提供一个结果样本JSONClient，我们可以帮助您

相关内容

最新更新

热门标签：