JavaScript函数不能处理已发布的html数据
我有两个页面，一个叫做index.html，其中包括所有css、jquery库和主要Java脚本。其他页面调用size.php，它将生成html数据，并在调用主ajax时发送到index.php页面 index.phpJavaScript函数不能处理已发布的html数据,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我有两个页面，一个叫做index.html，其中包括所有css、jquery库和主要Java脚本。其他页面调用size.php，它将生成html数据，并在调用主ajax时发送到index.php页面 index.php <head> <link href="css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css">
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="select2-container ">
<form >
<select id="select" class="form-control">
<optgroup label="English / Tamil"><option value="1">5x2 - Front Box - English</option>
<option value="2">8x2 - Front Box - English</option>
<option value="3">6x10 - Strip English / Tamil</option>
<option value="4">16x5 - English</option>
</optgroup>
</select>
</form>
<div id="preview">
<div class="col-xs-1 col-md-1 padding-no" ><img src="imgs/info-icon.png" id="download-tip" title="not set"/></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
//select change
$("#select").change(function(){
var size = $(this).select2('data').id;
$.ajax({
url: 'sizes.php',
type: 'POST',
data: { size_id : size },
dataType: 'html',
beforeSend: function() {
$('#preview').html('<img src="css/loading.gif" />');
},
success: function(data, textStatus, xhr) {
$('#preview').html(data);
},
error: function(xhr, textStatus, errorThrown) {
$('#preview').html(textStatus);
}
});
});
$('#size-tip').tooltip({
placement: "top",
container: 'body'
});
});
</script>
<?php
require_once('include/db.php');
$size_id= $_POST['size'];
?>
<div class="col-xs-1 col-md-1 padding-no" >
<img src="imgs/info-icon.png" id="size-tip" title="<?php echo $size_id;?>" />
</div>
需要您的帮助您无法在动态内容上绑定事件。在工具提示函数中使用jquery on函数添加工具提示函数jquery response，这可能会解决您的问题？Rahul tooltip函数已经存在于bootstrap.js中，但在joomla、wordpress和其他mvc框架中，它们是如何处理的？我简化了只显示工具提示的过程，我只是在顶部添加了一个库，并协调了一些代码，请根据您的需要进行修改谢谢您的回答，实际上，我需要用Javascript绑定动态内容。我想我实际得到的是，当数据被附加到任何元素div，p，span中后，你想要显示从ajax响应中获得的数据的工具提示。当你将鼠标悬停在它上面时，它的磁贴将显示为tootip。我是对的吗？我用jquery加载函数修复了它，它可以与动态js一起工作
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<div class="select2-container ">
<form >
<select id="select" class="form-control">
<optgroup label="English / Tamil"><option value="1">5x2 - Front Box - English</option>
<option value="2">8x2 - Front Box - English</option>
<option value="3">6x10 - Strip English / Tamil</option>
<option value="4">16x5 - English</option>
</optgroup>
</select>
</form>
<div id="preview">
<div class="col-xs-1 col-md-1 padding-no" ><img src="imgs/info-icon.png" id="download-tip" title="not set"/></div>
</div>
<script>
$(document).ready(function(){
//select change
$("#select").change(function(){
// alert('ddd');
var size = 100;
//alert(size);
$.ajax({
url: 'ajax/sizes.php',
type: 'POST',
dataType: 'html',
beforeSend: function() {
//$('#preview').html('<img src="css/loading.gif" />');
},
success: function(data, textStatus, xhr) {
alert(data);
$('#preview').html(data);
},
error: function(xhr, textStatus, errorThrown) {
$('#preview').html(textStatus);
}
});
});
// $('#size-tip').tooltip({
// placement: "top",
// container: 'body'
// });
});
</script>