目次
回复讨论(解决方案)
ホームページ ウェブフロントエンド htmlチュートリアル jqueryはポップアップlayer_html/css_WEB-ITnoseを追加します

jqueryはポップアップlayer_html/css_WEB-ITnoseを追加します

Jun 24, 2016 am 11:30 AM

代码如下
$(function() {

 $.ajax({ 
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
    $("#news").empty();
       if(typeof(dts)!=undefined){
           for(var i=0;i var a = "

";
        var b = "";
           var c = a+b;
         //  var d =" ";
           $("#news").append(c); 
         
     }
}}
  
});
 $('#test2').on('click', function() {
// alert(2);
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: '
自定义内容444
'
        });
    }); 
});
点击id=“test2"的图片没反应,不弹出弹出层,为什么啊??


回复讨论(解决方案)

id不能重复啊 

顺便把on绑定事件改成live比较好

id不能重复啊
改完了$.ajax({
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
$("#news").empty();
if(typeof(dts)!=undefined){
for(var i=0;i var a = "

";
        var b = "";
           var c = a+b;
         //  var d =" ";
           $("#news").append(c); 
         
     }
}}
  
});
 $('.test2').on('click', function() {
// alert(2);
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: '
自定义内容444
'
        });
    }); 
});
还是不好使哎 - -


id不能重复啊 
改完了$.ajax({ 
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
    $("#news").empty();
       if(typeof(dts)!=undefined){
           for(var i=0;i var a = "

";
        var b = "";
           var c = a+b;
         //  var d =" ";
           $("#news").append(c); 
         
     }
}}
  
});
 $('.test2').on('click', function() {
// alert(2);
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: '
自定义内容444
'
        });
    }); 
});
还是不好使哎 - -

$('.test2').on('click', function()
改成
$('.test2').live('click', function()



id不能重复啊 
改完了$.ajax({
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
$("#news").empty();
if(typeof(dts)!=undefined){
for(var i=0;i var a = "

";
        var b = "";
           var c = a+b;
         //  var d =" ";
           $("#news").append(c); 
         
     }
}}
  
});
 $('.test2').on('click', function() {
// alert(2);
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: '
自定义内容444
'
        });
    }); 
});
还是不好使哎 - -



$('.test2').on('click', function()
改成
$('.test2').live('click', function()

$('.test2').live('click', function() {
 alert(2);
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: '
自定义内容444
'
        });
    }); 

   
      
11111111111

      
      
portfolio img

      
portfolio img

      
portfolio img

      
portfolio img

      
      
   

   

换了更不好使了= = 本来 页面写死的还好用呢

换了更不好使了= = 本来 页面写死的还好用呢


live不好用?live就是为当前或未来的匹配元素添加一个或多个事件处理器
你什么版本jquery?1.9+?
那你还是换回on吧
$(document).on("click",".test2",function(){


换了更不好使了= = 本来 页面写死的还好用呢


live不好用?live就是为当前或未来的匹配元素添加一个或多个事件处理器
你什么版本jquery?1.9+?
那你还是换回on吧
$(document).on("click",".test2",function(){

终于好用了
$('.test2').live('click', function() {改了就好了 为啥啊?
还有个问题 大神我要弹出层显示图片链接 在数据库的那条记录的其他内容怎么通过数据库id找到显示啊 ?

终于好用了
$('.test2').live('click', function() {改了就好了 为啥啊?
还有个问题 大神我要弹出层显示图片链接 在数据库的那条记录的其他内容怎么通过数据库id找到显示啊 ?


live方法1.9+不支持了 被on取代了
显示弹层之前,先发条ajax根据id去数据库查出那条信息,把数据带会页面再显示弹层,
注意ajax异步请求和页面赋值的时间差


终于好用了
$('.test2').live('click', function() {改了就好了 为啥啊?
还有个问题 大神我要弹出层显示图片链接 在数据库的那条记录的其他内容怎么通过数据库id找到显示啊 ?


live方法1.9+不支持了 被on取代了
显示弹层之前,先发条ajax根据id去数据库查出那条信息,把数据带会页面再显示弹层,
注意ajax异步请求和页面赋值的时间差

我在这已经查到数据库图片信息的其他字段了$.ajax({ 
type:'POST',
url: 'hhWebsiteInfoController.do?website-getDt',
dataType:'json',
data:'',
success:function(json){
alert(1);
var dts = json.attributes.dts;
    $("#news").empty();
       if(typeof(dts)!=undefined){
           for(var i=0;i var a = "";
        var b = "
";
        //var d = "";
       
           var c = a+b;
           $(".test3").append(c);
           $("#news").append(c); 
         
     }
 这是弹出层
$(document).on('click',".test2",function() {
 
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: '
ss
'
        });
    }); 
});
   我觉得$(".test3").append(c);就把别的字段信息加到弹出层了 

你建一个全局变量,把dts赋值给它,
ajax循环的时候, class='test2'后边加上自定义属性(举例:dataIndex) 值为 i 
var b = "

";
test2 click事件里先取dataIndex的值 再取前面全局变量对应索引的对象,
然后赋值就行了


test2 click事件里先取dataIndex的值 再取前面全局变量对应索引的对象  然后赋值 这个不懂啊 咋写的..
success:function(json){
alert(1);
var dts = json.attributes.dts;
    $("#news").empty();
    var quanju = dts;
       if(typeof(dts)!=undefined){
           for(var i=0;i var a = "

";
        var b = "
";
        var d = "";
       
           var c = a+b;
         
           $("#news").append(c); 
         
     }
}}
  
});

 $(document).on('click',".test2",function() {
  
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: '
内容
'
}); U $ (ドキュメント) .on ('click', ".Test2", function () {

Layer.open ({

Type: 1, Area: ['600px', '360px'],

shadeClose: true : true: true ,//点击遮罩关闭

content: '

"+quanju[dataIndex].summary+"
'
);
} );

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

See all articles