Мой метод jquery не работает

Я действительно запутался. У меня есть код javascript, который публикуется в webmethod и получает строку. И есть тег h1. Я хочу выделить возвращающиеся слова на веб-сайте (здесь «abc»). Поэтому мой код aspx приведен ниже. Мой метод jquery (выделение) не работает. Может ли кто-нибудь помочь с этим?Мой метод jquery не работает

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" 
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication4._Default" %> 

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content> 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 

<!doctype html> 
<html lang="en"> 
<head> 
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script src="http://www.google.com/jsapi" type="text/javascript"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1.1', { packages: ['corechart', 'controls'] }); 
    </script> 

    <script src="Scripts/jquery-1.11.3.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script> 
</head> 
<body> 

<h1> abc sadaf dasfafa dsada abc afasgfa abc </h1> 

<script> 
    var exp; 
    jQuery.fn.highlight = function (str, className) { 
     var regex = new RegExp(str, "gi"); 
     return this.each(function() { 
      $(this).contents().filter(function() { 
       return this.nodeType == 3 && regex.test(this.nodeValue); 
      }).replaceWith(function() { 
       return (this.nodeValue || "").replace(regex, function (match) { 
       return "<span class=\"" + className + "\">" + match + "</span>"; 
       }); 
      }); 
     }); 
    }; 

    $.ajax({ 
     type: 'POST', 
     url: 'http://localhost:61216/Default.aspx/MyFunction', 
     contentType: 'application/json; charset=utf-8', 
     dataType: 'json', 
     success: function (result) { 
     exp = result.d; 
     }, 
     error: function() { 
     alert('Something occured'); 
     } 
    }); 

    $(document).on('click', 'h1', function(){ 
     $('h1').highlight(exp, "highlight"); 
     alert("hi"); 
    }); 
</script> 

</body> 
</html> 
</asp:Content>

источник

2016-04-13 Melih Rıfat Kaptan

'Консоль error' любой – uzaif

Вы можете обернуть JQuery скрипт в JQuery (документ) .ready (функция() {/ * JQuery код * /}); –

ваш выделенный код '$ ('h1'). Highlight (exp," highlight ");' должен находиться внутри обработчика успеха Ajax чуть ниже строки 'exp = result.d;'. Пожалуйста, попробуйте и дайте мне знать. – vijayP

Ваша функция JQuery работает, как вы можете увидеть ниже:

var exp = 'abc'; 
 
jQuery.fn.highlight = function(str, className) { 
 
    var regex = new RegExp(str, "gi"); 
 
    return this.each(function() { 
 
    $(this).contents().filter(function() { 
 
     return this.nodeType == 3 && regex.test(this.nodeValue); 
 
    }).replaceWith(function() { 
 
     return (this.nodeValue || "").replace(regex, function(match) { 
 
     return "<span class=" + className + ">" + match + "</span>"; 
 
     }); 
 
    }); 
 
    }); 
 
}; 
 

 
$(document).on('click', 'h1', function() { 
 
    $('h1').highlight(exp, "highlight"); 
 
});

.highlight { 
 
    color: red; 
 
    background-color: yellow; 
 
}

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

 
<h1> abc sadaf dasfafa dsada abc afasgfa abc </h1>

Проблема заключается в success обратного вызова из вашего запроса AJAX. Функция highlight вызывается только тогда, когда пользователь нажимает на элемент h1. Поэтому, когда ваш запрос ajax заканчивается, вам нужно вызвать функцию, чтобы выделить новый exp. Попробуйте заменить обратный вызов с кодом сильфона и попробуйте еще раз:

success: function (result) { 
    exp = result.d; 
    $('h1').highlight(exp, "highlight"); 
}

источник

2016-04-13 11:23:51 Victor

Спасибо, что так много сработало! :) @Victor –

Мой метод jquery не работает

ответ

Смежные вопросы